Как сделать изменения значения в зависимости от выбранного input radio?

Question

[Андрей]

Есть код:

<div class="card">
	<h4>Пицца «Пепперони»</h4>
	<img src="images/pizza.png">
	<p>Пепперони, перец халапеньо, сыр моцарелла, пицца-соус, травы прованса</p>
	<input type="radio" class="radio" value="470" id="option1" name="1" checked />
	<label for="option1">32 см</label>
	<input type="radio" class="radio" value="390" id="option2" name="1" />
	<label for="option2">24 см</label>
	<p>470 руб.</p>
	<p>390 руб.</p>
</div>

Как реализовать чтобы при выборе 32 см показывало цену 470 рублей, а если выбрано 24 см показывало 390 рублей? Пытался сделать через js, в итоге при выборе 24 см появлялась цена 390 рублей, но 470 так же оставалось

Comments

[WapSter]

Учить js или так

Answer 1

[Андрей Охотников]

<div class="card">
  <h4>Пицца «Пепперони»</h4>
  <img src="images/pizza.png">
  <p>Пепперони, перец халапеньо, сыр моцарелла, пицца-соус, травы прованса</p>
  <input type="radio" class="radio" value="470" id="option1" name="radio" onchange="func()"/>
  <label for="option1">32 см</label>
  <input type="radio" class="radio" value="390" id="option2" name="radio" onchange="func()"/>
  <label for="option2">24 см</label>
  <p id="result"></p>
</div>

const result = document.getElementById('result')
const radio = document.querySelector('input[name = "radio"]')

function func() {
  const checked = document.querySelector('input[name = "radio"]:checked');
  result.innerText = checked.value
}