i managed json php file , use within functions. consequence of appears several pieces of functionality working not , have no clue why is. issue im sure key reason why not working error in chrome
uncaught typeerror: cannot read property 'states' of undefined buttonsclick @ index.js:79playclick @ index.js:316window.onload @ index.js:320
here code
window.onload = function() { //hangman var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var categories; // array of topics var chosencategory; // selected catagory var gethint ; // word gethint var word ; // selected word var guess ; // guess var guesses = [ ]; // stored guesses var lives ; // lives var counter ; // count correct guesses var space; // number of spaces in word '-' var youlost; //bool deterime if have won or lost game // elements var showlives = document.getelementbyid("mylives"); var showclue = document.getelementbyid("clue"); var showlivesclick = document.getelementbyid("mylivesclick") //button click test //var options = ["cat", "dog", "dragon", "unicorn", "mouse", "horse", "hamster", "giant"]; var answersblank = ["?", "?", "?", "?","?", "?", "?", "?", "?"]; var answersid = ["alabama", "alaska", "arizona", "arkansas", "california", "colorado", "connecticut", "delaware", "florida"]; //var optionstate = ["correct", "correct", "incorrect", "incorrect", "correct", "incorrect", "correct", "incorrect"]; var counterclick; var livesclick; var clickquess; // create options ul var xmlhttp = new xmlhttprequest(); var url; var getinfoall = function(){ url = "button_click_1.php"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { console.log("the connection complete"); var myjson = json.parse(xmlhttp.responsetext); buttonsclick(myjson); } else { console.log("connection not made"); } } xmlhttp.open("get", url, true); xmlhttp.send(); } var buttonsclick = function (json) { mybuttonsclick = document.getelementbyid('buttonsclick'); myanswersblank = document.getelementbyid('correctanswers'); option = document.createelement('ul'); blankanswer = document.createelement('ul'); (var = 0; < json.states.length; i++) { option.id = 'statesall'; listcheck = document.createelement('li'); listcheck.id = json.states[i].answer; console.log(listcheck.id + " " + json.states[i].answer); listcheck.innerhtml = json.states[i].state_name; checkclick(); mybuttonsclick.appendchild(option); option.appendchild(listcheck); //= json.states[i].image; } (var = 0; < answersblank.length; i++) { blankanswer.id ='answersblank'; list = document.createelement('li'); list.id = answersid[i]; list.innerhtml = answersblank[i]; myanswersblank.appendchild(blankanswer); blankanswer.appendchild(list); } } // show lives commentsclick = function () { showlivesclick.innerhtml = "you have " + livesclick + " lives"; if ((livesclick < 1) && (youlost = false)) { reponse = document.getelementbyid("question").innerhtml = "unlucky! got " + counterclick + " correct! please try again"; showlivesclick.innerhtml = "game over"; youlost = true; } (var = 0; < answersblank.length; i++) { if ((counterclick === answersblank.length) && (youlost == false)){ if(livesclick >1){ reponse = document.getelementbyid("question").innerhtml = "well done! beat quiz " + livesclick + " lives remaining!"; } else { reponse = document.getelementbyid("question").innerhtml = "well done! beat quiz " + livesclick + " life remaining!"; } showlivesclick.innerhtml = "you win!"; } } } checkclick = function(){ listcheck.onclick = function(){ var choice = this; console.log(choice.id); if(choice.id == "correct"){ console.log("it works"); this.setattribute("class", "active"); counterclick +=1; selector = choice.innerhtml; console.log(selector); answer = document.getelementbyid(selector).innerhtml = choice.innerhtml; answer = document.getelementbyid(selector).style.color = 'green'; this.onclick = null; commentsclick(); } else{ this.setattribute("class", "active"); this.style.color = 'red'; this.onclick = null; livesclick -=1; commentsclick(); } } } playclick = function(){ livesclick = 3; counterclick = 0; youlost = false; getinfoall(); buttonsclick(); commentsclick(); } play(); playclick(); document.getelementbyid('resetclick').onclick = function() { option.parentnode.removechild(option); playclick(); } } the errors seem occur through commentsclick, buttonsclick
commentsclick - error score - when user has hit 0 supposed shown lose text user seems win 0 lives remaining not intended functionality
buttonsclick - error undefined states error above...
i have spent days looking on code , stumped why these errors have occured in result of json retrieval. given
without going through hundreds of lines of code, seems need check whether json.states exists , go loop if does:
if (json && json.states) { (var = 0; < json.states.length; i++) { ... explanation:
uncaught typeerror: cannot read property 'states' of undefined buttonsclick @ index.js:79 - problematic function:
buttonsclick - in file:
index.js - line number:
79 - problematic property:
states - the object you're trying access property:
json - the problem summary:
jsoncomes functionundefined
probably easiest solution store json ajax returns in variable , use functions that, not argument. piece of code:
// create options ul var xmlhttp = new xmlhttprequest(); var url; var getinfoall = function(){ url = "button_click_1.php"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { console.log("the connection complete"); var myjson = json.parse(xmlhttp.responsetext); buttonsclick(myjson); } else { console.log("connection not made"); } needs become like:
// create options ul var xmlhttp = new xmlhttprequest(); var url; var json; // we'll keep ajax returns in here var getinfoall = function(){ url = "button_click_1.php"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { console.log("the connection complete"); json = json.parse(xmlhttp.responsetext); buttonsclick(); } else { console.log("connection not made"); } and definition of buttonsclick needs change from:
var buttonsclick = function (json) { ... to:
var buttonsclick = function () { ... that way read value of json variable. make sure function never called before json ready.
