Question

我终于设法从php文件中获取json并在我的函数中使用它。然而，这样做的后果似乎是现在完美运行的几个功能部件没有，我不知道为什么会这样。另一个问题是确保一切都不起作用的一个关键原因是我在chrome中的错误

未捕获的TypeError：无法读取未定义的属性“状态” buttonsClick @ index.js：79playClick @ index.js：316window.onload @ index.js：320

这是我的代码

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 to deterime if you have won or lost the game

  // Get 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 is complete");
        var myJSON = JSON.parse(xmlhttp.responseText);
        buttonsClick(myJSON);
    }
    else
    {
        console.log("connection is 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');

      for (var i = 0; i < 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;  
      }

    for (var i = 0; i < 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! You got " +  counterClick + " correct! Please try again";
      showLivesClick.innerHTML = "Game Over";
      youLost = true;
    }
    for (var i = 0; i < answersblank.length; i++) {
      if ((counterClick === answersblank.length) && (youLost == false)){
          if(livesClick >1){
             reponse = document.getElementById("question").innerHTML = "Well done! You beat the quiz with " +   livesClick + " lives remaining!";
          }
          else
          {
             reponse = document.getElementById("question").innerHTML = "Well done! You beat the quiz with only " +  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();
  }


}

错误似乎通过commentsClick，buttonsClick

发生

评论点击 - 这个错误与得分有关 - 当用户点击零时，他们应该显示您丢失了文本但是用户似乎赢了0生命剩余而不是预期的功能

buttonsClick - 此错误与上面的未定义状态错误有关...

我花了几天时间查看我的代码，并且因为json检索而导致这些错误发生的原因令人难以接受。感谢您给予的任何帮助

Answer 1

如果没有查看代码的数百行，您似乎只需要检查json.states是否存在，只有这样才会进入此循环：

if (json && json.states) {
   for (var i = 0; i < json.states.length; i++) {
   ...

说明：

Uncaught TypeError: Cannot read property 'states' of undefined buttonsClick @ index.js:79

有问题的功能：buttonsClick
在档案中：index.js
行号：79
有问题的财产：states
您尝试访问该媒体资源的唯一对象：json
问题摘要：json作为undefined

可能最简单的解决方案是将AJAX返回的json存储在一个变量中，并从类似的函数中使用它，而不是作为参数。所以这段代码：

    // 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 is complete");
        var myJSON = JSON.parse(xmlhttp.responseText);
        buttonsClick(myJSON);
    }
    else
    {
        console.log("connection is not made");

    }

需要变得像：

  // create options ul

  var xmlhttp = new XMLHttpRequest();
  var url;
  var json; // we'll keep what 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 is complete");
        json = JSON.parse(xmlhttp.responseText);
        buttonsClick();
      }
      else
      {
        console.log("connection is not made");

      }

buttonsClick的定义需要改变：

var buttonsClick = function (json) {
    ...

到：

var buttonsClick = function () {
    ...

这样它将读取json变量的值。确保在json准备好之前永远不会调用该函数。

在javascript中检索php后发生错误

1 个答案: