I have generated checkboxes by js:
anwsersCount = question.ChoiceQuestionAnwsers().length;
questionBodyContainer = document.getElementById('questionBody');
//self.ChoosedQuestionAnwsers = question.ChoiceQuestionAnwsers;
for (var i = 0; i < anwsersCount; i++) {
var newOption = document.createElement("input");
var newOptionLabel = document.createElement("label");
newOption.type = "checkbox";
newOption.id = i;
newOption.value = i;
newOptionLabel.for = i;
newOptionLabel.setAttribute("style", "margin-left: 5px");
newOption.onclick = function(event) {
alert('alert');
};
newOptionLabel.innerHTML = question.ChoiceQuestionAnwsers()[i].Text;
// questionBodyContainer.innerHTML += question.ChoiceQuestionAnwsers()[i].Text + "<p>";
// questionBodyContainer.appendChild(newOption);
questionBodyContainer.appendChild(newOption);
questionBodyContainer.appendChild(newOptionLabel);
questionBodyContainer.innerHTML += "<p>";
//self.ChoosedQuestionAnwsers.push(question.ChoiceQuestionAnwsers()[i]);
}
and onclick event for generated checkboxes dosn't work. Do you have any ideas how to make it works?
Replace
newOption.onclick = function(event) {
alert('alert');
};
With:
newOption.addEventListener('click', function() {
alert('alert');
});
Try binding them after you create them all:
anwsersCount = 5;
questionBodyContainer = document.getElementById('questionBody');
for (var i = 0; i < anwsersCount; i++) {
var newOption = document.createElement("input");
var newOptionLabel = document.createElement("label");
newOption.type = "checkbox";
newOption.id = i;
newOption.value = i;
newOptionLabel.for = i;
newOptionLabel.setAttribute("style", "margin-left: 5px");
newOptionLabel.innerHTML = "Dummie Text";
questionBodyContainer.appendChild(newOption);
questionBodyContainer.appendChild(newOptionLabel);
questionBodyContainer.innerHTML += "<p>";
}
checks = questionBodyContainer.getElementsByTagName("input");
for (var i = 0; i < checks.length; i++)
{
checks[i].addEventListener('click', function() {
alert(this.getAttribute("id"));
});
}
Edit : The reason why it does not work inside of the for loop is because you use the innerHTML
property after updating the DOM. If you must add a new paragraph, do not add it through that property, add it in the same fashion you add the other elements:
anwsersCount = 5;
questionBodyContainer = document.getElementById('questionBody');
for (var i = 0; i < anwsersCount; i++) {
var newOption = document.createElement("input");
var newOptionLabel = document.createElement("label");
newOption.type = "checkbox";
newOption.id = i;
newOption.value = i;
newOptionLabel.for = i;
newOptionLabel.setAttribute("style", "margin-left: 5px");
newOptionLabel.innerHTML = "Dummie Text";
questionBodyContainer.appendChild(newOption);
questionBodyContainer.appendChild(newOptionLabel);
questionBodyContainer.appendChild(document.createElement("p"));
newOption.addEventListener('click', (function()
{
alert(this.getAttribute("id"));
}), false);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.