How to call the function "change" if either of the 5 inputs is checked?
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. 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.
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>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>