How do you check a Radio Button with JS if you click a Button in HTML (Vanilla JS)?

Question

I dont know what to do... could you help me out?

Here is my code:

<div class="col-11 d-block btn-abo-one">
   <button "class="btn btn-lg">Hier klicken</button>
</div>

<div class="col-11 d-block btn-abo-two">
   <button "class="btn btn-lg">Hier klicken</button>
</div>

<div class="col-11 d-block btn-abo-three">
   <button "class="btn btn-lg">Hier klicken</button>
</div>

<div class="col-11 d-block btn-abo-four">
   <button "class="btn btn-lg">Hier klicken</button>
</div>

<div class="abowrapper">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#1" class="custom-control-input" value="ABO#1">
        <label class="custom-control-label" for="ABO#1">Abo 1</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#2" class="custom-control-input" value="ABO#2">
        <label class="custom-control-label" for="ABO#2">Abo 2</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#3" class="custom-control-input" value="ABO#3">
        <label class="custom-control-label" for="ABO#3">Abo 3</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#4" class="custom-control-input" value="ABO#4">
        <label class="custom-control-label" for="ABO#4">Abo 4</label></div>
      </div>
    </div>
</div>

And that is my JS:

const btnaboone = document.getElementsByClassName("btn-abo-one");

btnaboone.addEventListener('click', function () {
  document.getElementById("ABO#1").checked = true;
});

I want the radio button to be checked depending on which button I press. Sadly I am still a Beginner in JavaScript and I want to create my Java script code entirely in vanilla.

The Konsole returns the error that "btnaboone.addEventListener is not a function".

Does this answer your question? [How to correctly iterate through getElementsByClassName](https://stackoverflow.com/questions/15843581/how-to-correctly-iterate-through-getelementsbyclassname) — Lain, Feb 14 '23 at 15:13
You have to assign the listener to each element and not the entire `NodeList`. — Lain, Feb 14 '23 at 15:14
There should be an error in your console; that'll tell you a lot. — mykaf, Feb 14 '23 at 15:16
Does this answer your question? [JavaScript click event listener on class](https://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class) — Pete, Feb 14 '23 at 15:27

score 2 · Accepted Answer · answered Feb 14 '23 at 15:32

 <div class="col-11 d-block">
  <button class="btn btn-lg btn_radio" data-radio="ABO#1">
   Hier klicken
  </button>
 </div>

 <input type="radio" id="ABO#1" class="custom-control-input" value="ABO#1">

 document.querySelectorAll(".btn_radio").forEach(btn => () {
  btn.addEventListener("click", () {
   myid = btn.dataset.radio;
   document.getElementById(myId).checked = true;
  }
 }

Your mistakes:

btn-abo-one is the class for the parent div not the button
getElementsByClassName ruturns a group of elements so you need to loop through them to give each one the event listener

PS: i used querySelectorAll but you can use getElementsByClassName, just remove the dot (.)

Thanks! I had to edit it a bit, because of an error message, but it finally worked! `document.querySelectorAll(".btn_radio").forEach((btn) => { btn.addEventListener("click", () => { myid = btn.dataset.radio; document.getElementById(myid).checked = true; }) });` — Crysanthes, Feb 14 '23 at 16:09

How do you check a Radio Button with JS if you click a Button in HTML (Vanilla JS)?

1 Answers1