¿Cómo llamar a la función "cambiar" si cualquiera de las 5 entradas está marcada?
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 devuelve una colección. Intenta usar forEach() .
También creo que le gustaría usar onchange en lugar de onclick . Comenta uno de ellos en el fragmento de código a continuación para ver la diferencia.
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 - funciona en cada clic.
onchange : solo funciona cuando se cambia la selección.
Su querySelectorAll devuelve una colección que necesitaría recorrer
PERO en cambio Delegado:
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>Usar for o forEach bucle
<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>