CODEWITHSUNDEEP
javascriptcallback
Sandy
Sandy

Reputation: 27

Unable to access object values outside callback in javascript

I am having problems figuring out how to access values outside of the callback function. The callback runs when the "Play" button is clicked. There will be additional functions that will use the values in the callback function so I want to be able to access them outside of that depending on what additional button(s) the user chooses. It's coming back always as undefined, which makes sense because it fires before the user presses "Play". How do I pass it to a variable that I can access throughout the script? I've tried assigning the whole callback to a variable but then the callback function itself comes back undefined. And I've tried using return but that didn't work either. I'm new to javascript and this has me stumped so I would appreciate any help you can give.

Thanks, Sandy

<!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>

Upvotes: 0

Views: 280

Answers (1)

Khaled Awad
Khaled Awad

Reputation: 1834

Maybe something like this

<!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>

Upvotes: 0

Related Questions