如何解决由另一个未触发的事件侦听器添加到元素的事件侦听器
我有一个输入元素的事件侦听器,该事件侦听器添加到另一个事件侦听器中。我觉得这很糟。
这是我的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);
}
我觉得这与计时其他对象的加载有关,但是我无法解决此问题。我还试图从帖子中省去不必要的代码,因此可能有些事情似乎没有任何意义。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。