How i can use "querySelectorAll"?

Question

How i can use "querySelectorAll"?

102 views Asked by nyar At 07 December 2024 at 01:58

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')

Original Q&A

There are 3 answers

Ran Turner On 02 January 2022 at 16:50

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>

Carsten Massmann On 02 January 2022 at 17:01

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>

**nyar** · Accepted Answer · 2022-01-02T17:24:55+00:00

nyar On 02 January 2022 at 17:24 BEST ANSWER

the problem was that I did not specify "<!DOCTYPE html>" in html file...

TechQA.

How i can use "querySelectorAll"?

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ARRAYS

Related Questions in QUERYSELECTOR

Popular Questions

Popular Tags

Trending Questions