How to call the function "change" if either of the 5 inputs is checked?

Question

let list = document.querySelectorAll("input");
let price = document.getElementById("price");

function change() {
  price.innerHTML = '145';
}

list.onclick = change;

<div>
  <input id="input1" type="radio" name="number">
  <label class="input" for="input1">1</label>

  <input id="input2" type="radio" name="number">
  <label class="input" for="input2">2</label>

  <input id="input3" type="radio" name="number">
  <label class="input" for="input3">3</label>

  <input id="input4" type="radio" name="number">
  <label class="input" for="input4">4</label>

  <input id="input5" type="radio" name="number">
  <label class="input" for="input5">5</label>
</div>
<div>
  <p>Price: $<span id="price">29</span></p>
</div>

`querySelectorAll` returns a collection, so `list.onclick` won't work. You could add a single event listener on the parent `div` element and use `event.target` to determine which input was clicked/changed. — Yousaf, Oct 07 '21 at 09:21

score 1 · Answer 1 · answered Oct 07 '21 at 09:22

querySelectorAll returns a collection. Try to use forEach().

Also I feel you would want to use onchange instead of onclick. Comment one of them in the below code snippet to see the difference.

        let list = document.querySelectorAll("input");
        let price = document.getElementById("price");
        
        function change() {
        console.log("change clicked");
            price.innerHTML = '145';
        }
        
      //  list.forEach(x => x.onclick = change);
        list.forEach(x => x.onchange = change);

<body>
    
    <div>
        <input id="input1" type="radio" name ="number">
        <label class="input"  for="input1">1</label>
        
        <input id="input2" type="radio" name ="number">
        <label class="input"  for="input2">2</label>
        
        <input id="input3" type="radio" name ="number">
        <label class="input"  for="input3">3</label>
        
        <input id="input4" type="radio" name ="number">
        <label class="input"  for="input4">4</label>
        
        <input id="input5" type="radio" name ="number">
        <label class="input"  for="input5">5</label>
    </div>
    <div>
        <p>Price: $<span id="price">29</span></p>
    </div>
    
    
</body>

onclick - works on every click.

onchange - works only when the selection is changed.

score 1 · Accepted Answer · answered Oct 07 '21 at 09:24

Your querySelectorAll returns a collection you would need to loop over

BUT instead Delegate:

document.getElementById("list").addEventListener("change",function(e) {
  const tgt = e.target;
  if (tgt.name==="number") {
    document.getElementById("price").textContent = 29 * tgt.value
  }
});

<div id="list">
  <label><input id="input1" type="radio" name="number" value="1">1</label>
  <label><input id="input2" type="radio" name="number" value="2">2</label>
  <label><input id="input3" type="radio" name="number" value="3">3</label>
  <label><input id="input4" type="radio" name="number" value="4">4</label>
  <label><input id="input5" type="radio" name="number" value="5">5</label>
</div>
<div>
  <p>Price: $<span id="price">29</span></p>
</div>

score 0 · Answer 3 · answered Oct 07 '21 at 09:26

Use for or forEach loop

<body>
    <div>
        <input id="input1" type="radio" name="number" />
        <label class="input" for="input1">1</label>

        <input id="input2" type="radio" name="number" />
        <label class="input" for="input2">2</label>

        <input id="input3" type="radio" name="number" />
        <label class="input" for="input3">3</label>

        <input id="input4" type="radio" name="number" />
        <label class="input" for="input4">4</label>

        <input id="input5" type="radio" name="number" />
        <label class="input" for="input5">5</label>
    </div>
    <div>
        <p>Price: $<span id="price">29</span></p>
    </div>

    <script type="text/javascript">
        let list = document.querySelectorAll("input"),
            price = document.querySelector("#price");

        list.forEach((item, idx) => {
            item.addEventListener("change", function () {
                change();
            });
        });

        function change() {
            price.innerHTML = "145";
        }
    </script>
</body>

`item.addEventListener("change", change)` but it is not recommended and it is unnecessary to add event listeners to all elements in a collection — mplungjan, Oct 07 '21 at 09:28

How to call the function "change" if either of the 5 inputs is checked?

3 Answers3