我如何使用“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]
}

當我想為我的標簽設置文本時，出現錯誤：

未捕獲的類型錯誤：無法設置未定義的屬性（設置“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

在迭代之前存儲數組的長度以迭代到變量中是一種很好的做法。 這樣，您還可以確保迭代不會 go 超過您在循環中引用的另一個數組的長度。

代碼中還有一個邏輯錯誤。 重寫標簽的innerText將刪除嵌套的input元素。 我已將輸入移出下面代碼中的標簽。

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

Answer 4

問題是我沒有在 html 文件中指定“ <!DOCTYPE html>" ...謝謝大家

我如何使用“querySelectorAll”？

問題描述

3 個解決方案

解決方案1
1 2022-01-02 16:50:23

解決方案2
1 2022-01-02 17:01:41

解決方案3
0 已采納 2022-01-02 17:21:49

解決方案4
0 2022-01-02 17:24:55

我如何使用“querySelectorAll”？

問題描述

3 個解決方案

解決方案1 1 2022-01-02 16:50:23

解決方案2 1 2022-01-02 17:01:41

解決方案3 0 已采納 2022-01-02 17:21:49

解決方案4 0 2022-01-02 17:24:55

解決方案1
1 2022-01-02 16:50:23

解決方案2
1 2022-01-02 17:01:41

解決方案3
0 已采納 2022-01-02 17:21:49

解決方案4
0 2022-01-02 17:24:55