由另一个未触发的事件侦听器添加到元素的事件侦听器

Question

我有一个输入元素的事件侦听器，该事件侦听器添加到另一个事件侦听器中。我觉得这很糟。

这是我的HTML

<button class="add_button" id="add_mc" onclick="add_mc()">Add Mult. Choice Question</button>

这是我的add_mc()的JavaScript

function add_mc() {
  questions += "mc,";
  addQuestion("mc", count++);
}

最后，这是在AddQuestion内部添加事件侦听器的位置 功能。看“ mc” 在这种情况下，我添加了numAnswers变量并尝试将侦听器附加到类型为number的输入上。我希望此输入创建选择的输入数量，但目前无法正常工作。

function addQuestion(type, count) {

  var displayArea = document.getElementById("questions");
  var questionDiv = document.createElement("div");

  questionDiv.setAttribute("class", "question");
  questionDiv.setAttribute("id", "questionDiv" + count);

  switch (type) {
    case "tf":
      //Create prompt for true/false
      createCommonElements(questionDiv, "Add a question that starts with \"True or false:\"...", count);

      //Create answer selector
      var answer = document.createElement("select");
      answer.innerHTML = "<option value=\"empty\">Choose the answer</option>";
      answer.innerHTML += "<option value=\"t\">True</option>";
      answer.innerHTML += "<option value=\"f\">False</option>";
      questionDiv.innerHTML += "<br/>";
      questionDiv.appendChild(answer);

      break; //End "tf" case

    case "mc":
      //Create prompt for M.C.
      createCommonElements(questionDiv, "Choose number of choices first, then add your question here.", count);
      questionDiv.innerHTML += "<br/>";

      //Create input for number of choices
      var numAnswers = document.createElement("input");
      numAnswers.setAttribute("type", "number");
      numAnswers.setAttribute("min", "2");
      numAnswers.setAttribute("placeholder", "How many choices?");
      numAnswers.setAttribute("id", "input_num_answers" + count);

      questionDiv.appendChild(numAnswers);

      //Listener to create choice text boxes based on number of choices selected
      numAnswers.addEventListener("change", function() {
        var question_desc = "";
        questionDiv.innerHTML += "<br/>";
        for (var i = 0; i < numAnswers.valueAsNumber; i++) {
          questionDiv.innerHTML += "<br/> <span>" + (i + 1) + "</span>";
          var choices = document.createElement("input");
          choices.setAttribute("id", "choice" + (i + 1));
          choices.setAttribute("placeholder", "Choice " + (i + 1));
          choices.style.width = "500px";
          questionDiv.appendChild(choices);
        }
        questionDiv.innerHTML += "<br/>";
        var answer = document.createElement("input");
        answer.setAttribute("type", "number");
        answer.setAttribute("max", numAnswers.valueAsNumber);
        answer.setAttribute("min", "1");
        answer.setAttribute("placeholder", "Which choice is right?");

        questionDiv.innerHTML += "<br/>";
        questionDiv.appendChild(answer);
      });


      //Create the prompt and append the numAnswers selector

      break; //End "mc" case

    case "blank":
      //Create the prompt and append
      createCommonElements(questionDiv, "Enter a fill in the blank question here.  You can use \"_____\" (underscores) to signify where the blank is.", count);

      //Create answers textarea
      var answers = document.createElement("textarea");
      answers.setAttribute("placeholder", "Enter valid text answers here separated by commas.");
      answers.setAttribute("cols", "100");
      answers.setAttribute("id", "answers" + count);
      questionDiv.appendChild(answers);
      break; //End "blank" case

    default:
      alert("Something has gone horribly wrong.  Please exit the website.");

  } //End Switch Statement

  //Add the created questionDiv to the displayArea div and add save quiz button
  displayArea.appendChild(questionDiv);

  //Add save quiz button at bottom
  alert(saveIsVisible);
  if (!saveIsVisible) {
    var saveButton = document.createElement("button");
    saveButton.innerText = "Save Quiz";
    saveButton.setAttribute("id", "save-quiz");
    saveButton.setAttribute("onclick", "saveQuiz()");
    document.getElementById("creator").innerHTML += "<hr/>";
    document.getElementById("creator").appendChild(saveButton);
    saveIsVisible = true;
  }
  alert("Count = " + count);
}

我觉得这与计时其他对象的加载有关，但是我无法解决此问题。我还试图从帖子中省去不必要的代码，因此可能有些事情似乎没有任何意义。