无法在javascript中访问回调外的对象值

时间:2014-11-23 04:04:16

标签: javascript callback

我在确定如何访问回调函数之外的值时遇到问题。单击“播放”按钮时将运行回调。将有其他函数将使用回调函数中的值,因此我希望能够在其外部访问它们,具体取决于用户选择的其他按钮。它总是以未定义的方式返回,这是有道理的,因为它在用户按下“播放”之前触发。如何将其传递给我可以在整个脚本中访问的变量?我已经尝试将整个回调分配给一个变量,但回调函数本身又回来了未定义。我尝试过使用return,但这也没用。我是javascript的新手,这让我很难过,所以我很感激你能给予的任何帮助。

谢谢, 沙

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
//callback function for jsonp
function handleEntry (entry) {
console.log(entry);
console.log(entry.results[0]);
console.log(entry.results[0].headword);
document.getElementById("blanks").innerHTML = entry.results[0].headword;
document.getElementById("definition").innerHTML = entry.results[0].senses[0].definition;
var myHeadword = entry.results[0].headword;
var entryInfo = {};
entryInfo.definition = entry.results[0].senses[0].definition
console.log("This is the entryInfo definition: " + entryInfo.definition)
entryInfo.part_of_speech = entry.results[0].part_of_speech
console.log("This is the entryInfo part of speech: " + entryInfo.part_of_speech)
}

console.log(entry.results[0].senses[0].definition);

function loadWord() {
// Get a random number within the range of the dictionary index and assign it to the variable randomOffset
var randomOffset = Math.floor(Math.random() * (21178));
console.log("offset: " + randomOffset);
// Use the variable randomOffset in the API query URL to get a single random entry
var url = "https://api.pearson.com/v2/dictionaries/lasde/entries?offset=" + randomOffset + "&limit=1&jsonp=handleEntry";
console.log("headword API: " + url);        
// Create a new script element
var script_element = document.createElement('script');
// Set its source to the JSONP API
script_element.src = url;
// Stick the script element in the page <head>
    document.getElementsByTagName('head')[0].appendChild(script_element);
    }
// This is the function called by the "Give Up" button that needs the info from the 
// callback but keeps coming back undefined.
function showTheInfo (entryInfo){ 
console.log("this is the definition: " + entryInfo.definition)
alert('this is your 2nd parameter ' + entryInfo.definition);
console.log("this is the part of speech: " + entryInfo.part_of_speech)
alert('this is your 3rd parameter ' + entryInfo.part_of_speech);
document.getElementById("definition").innerHTML = entryInfo.part_of_speech;
}
    </script>
</head>
<body>
    <div class="row">
        <div class="col-md-6 col-sm-4">
            <div id="blanks" class="blanks align-me"></div>
        </div>
        <div class="col-md-6 col-sm-4">
            <div id="definition" class="definition align-me"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 align-me">
            <input onclick="loadWord()" id="loadWordButton" value="Play" type="button" class="btn btn-custom btn-md">
            <input onclick="showTheInfo()" id="showInfo" value="Give Up" type="button" class="btn btn-custom btn-md"/>

            <button type="button" class="btn btn-custom btn-md">Play Again</button>
            <button type="button" class="btn btn-custom btn-md">Help</button>
        </div>
    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

也许是这样的

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<script>
 //callback function for jsonp
 function handleEntry (entry) {
console.log(entry);
console.log(entry.results[0]);
console.log(entry.results[0].headword);
document.getElementById("blanks").innerHTML = entry.results[0].headword;
document.getElementById("definition").innerHTML = entry.results[0].senses[0].definition;
var myHeadword = entry.results[0].headword;
var toBeUsedForCallBack = entry.results[0].senses[0].definition; 
ThisIsTheSecondCallBackFunction(toBeUsedForCallBack)
}

console.log(entry.results[0].senses[0].definition);

function loadWord() {
// Get a random number within the range of the dictionary index and assign it to the variable randomOffset
var randomOffset = Math.floor(Math.random() * (21178));
console.log("offset: " + randomOffset);
// Use the variable randomOffset in the API query URL to get a single random entry
var url = "https://api.pearson.com/v2/dictionaries/lasde/entries?offset=" + randomOffset + "&limit=1&jsonp=handleEntry";
console.log("headword API: " + url);


// Create a new script element
var script_element = document.createElement('script');
// Set its source to the JSONP API
script_element.src = url;
// Stick the script element in the page <head>
    document.getElementsByTagName('head')[0].appendChild(script_element);
ThisIsTheFirstCallBackFunction(url)
}

function ThisIsTheFirstCallBackFunction (yourFirstParameterHere){ alert('this is your 1st parameter ' + yourFirstParameterHere);}
function ThisIsTheSecondCallBackFunction (yourSecondParameterHere){ alert('this is your 2nd parameter ' + yourSecondParameterHere);}
    </script>
</head>
<body>
    <div class="row">
        <div class="col-md-6 col-sm-4">
            <div id="blanks" class="blanks align-me"></div>
        </div>
        <div class="col-md-6 col-sm-4">
            <div id="definition" class="definition align-me"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 align-me">
            <input onclick="loadWord()" id="loadWordButton" value="Play" type="button" class="btn btn-custom btn-md">
            <button type="button" class="btn btn-custom btn-md">Give Up</button>
            <button type="button" class="btn btn-custom btn-md">Play Again</button>
            <button type="button" class="btn btn-custom btn-md">Help</button>
        </div>
    </div>
</div>
</body>