How i can use "querySelectorAll"?
Question
My html:
<label for="answer_1" class="answer_label"><input type="radio" id="answer_1">Answer</label>
<label for="answer_2" class="answer_label"><input type="radio" id="answer_2">Answer</label>
<label for="answer_3" class="answer_label"><input type="radio" id="answer_3">Answer</label>
My JS:
var answers = ["Answer_1","Answer_2","Answer_3"];
var answer_labels = document.querySelectorAll(".answer_label");
for (var i = 0; i < answers.length; i++){
answer_labels[i].innerText = answers[i]
}
When I want to set text to my labels, I get error:
Uncaught TypeError: Cannot set properties of undefined (setting 'innerText')
3 answers
solution1
1 2022-01-02 16:50:23
You have a syntax error in the for loop.
change for (var i = 0; i <.length; i++)
to for (var i = 0; i < answer_labels.length; i++)
var answers = ["Answer_1","Answer_2","Answer_3"] var answer_labels = document.querySelectorAll(".answer_label"); for (var i = 0; i < answer_labels.length; i++){ answer_labels[i].innerText = answers[i]; }
<label for="answer_1" class="answer_label"><input type="radio" name="choice" id="answer_1">Answer</label> <label for="answer_2" class="answer_label"><input type="radio" name="choice" id="answer_2">Answer</label> <label for="answer_3" class="answer_label"><input type="radio" name="choice" id="answer_3">Answer</label>solution2
1 2022-01-02 17:01:41
If you just want to replace the labels without destroying the radio button inputs inside you should maybe do something like this:
var answers = ["Answer_1","Answer_2","Answer_3"] document.querySelectorAll(".answer_label").forEach((l,i)=>{ l.innerHTML=l.querySelector("input").outerHTML+answers[i]; })
<label for="answer_1" class="answer_label"><input type="radio" name="choice" id="answer_1">Answer</label> <label for="answer_2" class="answer_label"><input type="radio" name="choice" id="answer_2">Answer</label> <label for="answer_3" class="answer_label"><input type="radio" name="choice" id="answer_3">Answer</label>
solution3
0 ACCPTED 2022-01-02 17:21:49
It's a good practice to store the length of the array to iterate into a variable before iterating. This way you can also make sure, that the iteration won't go past the length of the other array you refer in the loop.
There's also a logical error in the code. Rewriting innerText of the labels will remove the nested input elements. I've moved the inputs out of the labels in the code below.
var answers = ["Answer_1", "Answer_2", "Answer_3", "Answer_4"]; var answerLabels = document.querySelectorAll(".answer_label"); var length = Math.min(answers.length, answerLabels.length); for (var i = 0; i < length; i++) { answerLabels[i].innerText = answers[i]; }
<label for="answer_1" class="answer_label">Answer</label><input type="radio" id="answer_1"> <label for="answer_2" class="answer_label">Answer</label><input type="radio" id="answer_2"> <label for="answer_3" class="answer_label">Answer</label><input type="radio" id="answer_3">
solution4
0 2022-01-02 17:24:55
the problem was that I did not specify " <!DOCTYPE html>" in html file... thanks everyone
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.