Question

我正在进行测验。用户首先选择他/她想要回答的问题，然后回答它们。在他们回答了问题后，会有一个＆＃34;回到开始＆＃34; - 按钮，将它们带回到页面加载的位置。这都是通过使用javascript隐藏和显示div来完成的。

问题作为对象存储在对象中。如果用户想要回答5个问题，则将5个随机问题放入新对象中。此对象用于显示问题并查看用户获得的正确答案数。

当用户完成测验后，回到开始并开始一个新的测验我的问题来了。包含具有所选问题量的对象的var不会被包含新问题的新对象替换。而是使用相同的名称创建一个全新的var，在控制台中给我一个TypeError错误消息。

我在这个JSFiddle中以简化的方式重新创建了我的问题。第一组按钮可以看作是用户选择一定数量的问题，第二组按钮可以看作是答案。

    var firstDivClick = document.getElementsByClassName("button-1"),
      secondDivClick = document.getElementsByClassName("button-2");


   for(var i = 0; i < firstDivClick.length; i++) {
    firstDivClick[i].addEventListener("click", function() {      
      var valueAsInt = parseInt(this.textContent),
          object,
          firstDiv = document.getElementById("first-buttons-wrap"),
          secondDiv = document.getElementById("second-buttons-wrap");
      if(valueAsInt === 2) {
        object = {
          one: {
            text: "Where is my bed?"
          },
          two: {
            text: "Where does Santa Claus live?"
          }
        }
      }

      else if(valueAsInt === 3) {
        object = {
          one: {
            text: "Where is my bed?"
          },
          two: {
            text: "Where does Santa Claus live?"
          },
          three: {
            text: "Where does poo live?",
          }
        }
      }                   

      firstDiv.style.display = "none";
      secondDiv.style.display = "block";

      for(var i = 0; i < secondDivClick.length; i++) {
        secondDivClick[i].addEventListener("click", function() { 

          if(this.textContent === "abc") {
            firstDiv.style.display = "block";
            secondDiv.style.display = "none";
          }
        });
      }
    });
  }

Answer 1

正如我所理解的那样vfar：你需要把“对象”的定义放在循环之外：

  var firstDivClick = document.getElementsByClassName("button-1"),
      secondDivClick = document.getElementsByClassName("button-2");

  var object; // define globally and empty.

  // For loop so all buttons make an action
  for(var i = 0; i < firstDivClick.length; i++) {

    // Event handler for the buttons with class button-1
    firstDivClick[i].addEventListener("click", function() {

    console.log("----------------------");

      var valueAsInt = parseInt(this.textContent),
          firstDiv = document.getElementById("first-buttons-wrap"),
          secondDiv = document.getElementById("second-buttons-wrap");
          ....

如何避免重复的对象？

1 个答案: