javascript - 如何避免重复对象？

Question

我正在做一个测验。用户首先选择他/她想回答多少个问题，然后开始回答。在他们回答完问题后，会出现一个“返回开始”按钮，可以将他们带回到页面加载的位置。这一切都是通过使用 javascript 隐藏和显示 div 来完成的。

问题存储为对象中的对象。如果用户想回答 5 个问题，5 个随机问题将被放入一个新对象中。此对象用于显示问题并查看用户得到多少正确答案。

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

我在此 JSFiddle 中以简化的方式重现了我的问题。第一组按钮可以看作是用户选择问题的数量，第二组按钮是用户回答的时候。

https://jsfiddle.net/v2488zxx/

    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

据我了解这个问题:你需要将“对象”的定义放在循环之外:

  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");
          ....