Javascript element selection and modification

Question

So I am creating MCQ options where each option is essentially a div with the class "qinp" inside of which there is a radio button. What I want to do is when the div is clicked, I want the radio button to get checked. There is an input of type radio inside every div with class "qinp". My HTML is something like this-

<div class="qinp">                
    <label class="label-option" for="q1o1">Option 1
         <input type="radio" name="q1" id="q1o1">
         <span class="rd-btn">A</span>
    </label>
</div>

I am using Javascript and I am doing the following-

var number_of_qinps = document.querySelectorAll(".qinp").length;

for(var i = 0; i < number_of_qinps; ++i){
    document.querySelectorAll(".qinp")[i].addEventListener("click", function(){  
          document.querySelectorAll(".qinp")[i].firstElementChild.firstElementChild.checked = true;
    })
}

But for some reason I am getting the following error-

testpage.js:9 Uncaught TypeError: Cannot set property 'checked' of undefined at HTMLDivElement.

Can someone please explain what is going wrong here? This should have been fairly simple.

Here's your event listener code, fixed: https://jsfiddle.net/z5f1asg2/ — , Sep 06 '21 at 07:31
Duplicate of [JavaScript closure inside loops – simple practical example](/q/750486/4642212). `document.querySelectorAll(".qinp")[i]` doesn’t exist at the time you click. — Sebastian Simon, Sep 06 '21 at 07:32
In general, use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Sep 06 '21 at 07:33
Why use JS for this in the first place? If you want the div to have the functionality of the label, then why is it itself not the label already? — CBroe, Sep 06 '21 at 07:34
Why add javascript, Your input is already being checked, When clicked on div or label. — navnath, Sep 06 '21 at 07:37
You do not need javascript get checked when click div, "for" and "name" HTML element would do the job — Sam, Sep 06 '21 at 07:56

score 0 · Answer 1 · answered Sep 06 '21 at 07:48

Here the problem is with var keyword. Replace it with let and that will solve your problem. This is a clouser problem.

let number_of_qinps = document.querySelectorAll(".qinp").length;

for(let i = 0; i < number_of_qinps; ++i){
    document.querySelectorAll(".qinp")[i].addEventListener("click", function(){  
          document.querySelectorAll(".qinp")[i].firstElementChild.firstElementChild.checked = true;
    })
}

Javascript element selection and modification

1 Answers1