如何避免重复对象？答案

【问题标题】：How to avoid duplicate objects?如何避免重复对象？
【发布时间】：2015-07-30 02:57: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";
          }
        });
      }
    });
  }

【问题讨论】：

我不确定你的问题是什么 - 你的小提琴对我来说似乎工作正常，控制台上没有错误。

标签： javascript object

【解决方案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");
          ....

【讨论】：