我如何使用 "querySelectorAll"？

Question

我的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>

我的 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]
}

当我想为我的标签设置文本时，出现错误：

Uncaught TypeError: Cannot set properties of undefined (setting 'innerText')

Answer 1

for 循环中存在语法错误。

改变for (var i = 0; i < .length; i++)

到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>

Answer 2

如果你只想替换标签而不破坏里面的单选按钮输入，你应该这样做：

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>

Answer 3

问题是我没有在 html 文件中指定“<!DOCTYPE html>"...

我如何使用 "querySelectorAll"？

How i can use "querySelectorAll"?

html

javascript

arrays

queryselector