每当我在另一个方法中调用一个方法时，我都会得到TypeError无法读取未定义的信息

问题描述

我对JS还是很陌生，我正在构建一个项目，但是进展不大。我有一个名为AppContainer的类，并且在内部试图创建将运行琐事游戏的逻辑。我有一种方法在工作（startTrivia）。但是当我尝试在其中调用/使用其他方法（getQuestions）时，我得到了错误：

“未捕获的TypeError：无法读取未定义的属性'getQuestions'”。 *

我尝试将方法放置在被调用的方法之上，但还是没有运气。我还尝试过先将方法存储在变量中，并且仍然存在相同的错误。

也许我想做的事不可能吗？非常感谢您的帮助。 （对不起，注释过多的代码）

class  AppContainer  {  
  questions  =   [];  
  themes  =   [];  
  url  =  "http://localhost:3000";  
  score  =   {};


    
  btn1  =  document.getElementById("person");  
  btn2  =  document.getElementById("species");  
  btn3  =  document.getElementById("spaceships");  
  btn4  =  document.getElementById("planets");  
  btn5  =  document.getElementById("films");  
  btn6  =  document.getElementById("vehicles");  
  allButtons  =  document.getElementById("all-start");

    
  bindEventListener()  {
    const  allButtons  =  this.allButtons;
    const startTrivia =  this.startTrivia;
    this.btn1.addEventListener("click", function (event)  {
      //event.stopPropagation();
      allButtons.style.visibility  =  "hidden";
      console.log(event);
      startTrivia(event);
    });
    this.btn2.addEventListener("click", function (event)  {
      //event.stopPropagation();
      allButtons.style.visibility  =  "hidden";
      startTrivia(event);
    });
    this.btn3.addEventListener("click", function (event)  {
      //event.stopPropagation();
      allButtons.style.visibility  =  "hidden";
      startTrivia(event);
    });
    this.btn4.addEventListener("click", function (event)  {
      //event.stopPropagation();
      allButtons.style.visibility  =  "hidden";
      startTrivia(event);
    });
    this.btn5.addEventListener("click", function (event)  {
      //event.stopPropagation();
      allButtons.style.visibility  =  "hidden";
      startTrivia(event);
    });
    this.btn6.addEventListener("click", function (event)  {
      //event.stopPropagation();
      allButtons.style.visibility  =  "hidden";
      startTrivia(event);
    });  
  }




    
  startTrivia(elem)  {

      
    const triviaBox  =  document.getElementById("trivia-container");
    let firstButton = document.getElementById("person");
    //const getQuestions = this.getQuestions;

    //checking to see if the event target constains a specific classList button
         //if (elem.target.classList.contains("start-btn-person")) {
    // console.log('OHHHH YEAAAH!');
          //triviaBox.style.visibility = "visible";
           //console.log("how do we pivot?");
    // this.getQuestions();
    //}   
    console.log(elem.target)
    if (elem.target == firstButton) {
      console.log("Eurerka!")
      triviaBox.style.visibility  =  "visible";
      this.getQuestions();


    } else {
      console.log("it didnt work")

    };


      
  }

    
  getQuestions()  {     // make fetch request to /questions, then call renderQuestions
        
    fetch(this.url  +  "/questions")      .then((resp)  =>  resp.json())

             //populate the questions and theme properties with the returned data
            .then((data)  =>  {        
        data.forEach((question)  =>  {          
          new  Question(question.name, question.theme);        
        });

                
        this.renderQuestions();      
      })      .catch((err)  =>  alert(err));  
  }

    
  renderQuestions()  {     // creat DOM nodes and insert data into them to render in the DOM
        
    const  personButton  =  document.getElementById("person");    
    const  filmsButton  =  document.getElementById("films");    
    const  spaceshipsButton  =  document.getElementById("spaceships");    
    const  speciesButton  =  document.getElementById("species");    
    const  vehiclesButton  =  document.getElementById("vehicles");    
    const  planetsButton  =  document.getElementById("planets");

        
    this.questions.forEach((question)  =>  {      
      const  option  =  document.createElement("option");      
      option.innerText  =  question.name;

             //switch (question.theme.name) {
             //  case "person":
             //        personButton.appendChild(option);

             //         break;

             //   case "films":
             //    filmsButton.appendChild(option);

             //    break;

             //  case "spaceships":
             //    spaceshipsButton.appendChild(option);

             //     break;

             //   case "species":
             //     speciesButton.appendChild(option);

             //     break;

             //       case "vehicles":
             //     vehiclesButton.appendChild(option);

             //      break;

             //    case "planets":
             //    planetsButton.appendChild(option);

             //   break;
             //   default:
             //code block

             //  }
          
    });    
    document.body.appendChild(option);  
  }
}

const app = new AppContainer;

app.bindEventListener();
//app.startTrivia();
app.getQuestions()

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）