<div class="card-product__order-price">
<span id="base-price">1000</span>
руб
</div>
<div class="card-product__bubbles">
<div class="card-product__col">
<div class="card-product__bubbles-title">
Пункт 1 </div>
<div class="card-product__row">
<label class="card-product__bubble">
<input name="card-bubble-1" type="radio" checked="" value="1">
<span>вариант 1</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-1" type="radio" value="1.2">
<span>вариант 1-2</span>
</label>
</div>
<div class="card-product__row">
<label class="card-product__bubble">
<input name="card-bubble-1-1" type="radio" checked="" value="1">
<span>вариант 2-1</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-1-1" type="radio" value="1.1">
<span>вариант 2-2</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-1-1" type="radio" value="1.15">
<span>вариант 2-3</span>
</label>
</div>
</div>
<div class="card-product__col">
<div class="card-product__bubbles-title">
Пункт 2 </div>
<div class="card-product__row">
<label class="card-product__bubble">
<input name="card-bubble-2" type="radio" checked="" value="1">
<span>вариант 3-1</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-2" type="radio" value="1.1">
<span>вариант 3-2</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-2" type="radio" value="1.15">
<span>вариант 3-3</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-2" type="radio" value="1">
<span>вариант 3-4</span>
</label>
</div>
</div>
<div class="card-product__col">
<div class="card-product__bubbles-title">
Пункт 3 </div>
<div class="card-product__row">
<label class="card-product__bubble">
<input name="card-bubble-3" type="radio" checked="" value="1">
<span>вариант 4-1</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-3" type="radio" value="1.2">
<span>вариант 4-2</span>
</label>
<label class="card-product__bubble">
<input name="card-bubble-3" type="radio" value="1.25">
<span>вариант 4-3</span>
</label>
</div>
</div>
</div>
/**
* для вопроса https://qna.habr.com/q/1252278
* Как сделать, чтобы в калькуляторе по input значения не росли бесконечно?
*/
const inputs = document.querySelectorAll('input');
const basePrice = document.querySelector('#base-price');
const initialPrice = +basePrice.innerText;
// радиокнопки
const radioBubbles1 = document.querySelectorAll('input[name="card-bubble-1"');
const radioBubbles1_1 = document.querySelectorAll('input[name="card-bubble-1-1"');
const radioBubbles2 = document.querySelectorAll('input[name="card-bubble-2"');
const radioBubbles3 = document.querySelectorAll('input[name="card-bubble-3"');
// включаем отслеживание (прослушку)
for (const input of inputs) {
input.addEventListener('input', function () {
calculate();
})
}
// функция калькулирования
function calculate() {
let totalPrice = initialPrice;
for (const radio of radioBubbles1) {
if (radio.checked) {
totalPrice = totalPrice * parseFloat(radio.value);
console.log(totalPrice);
}
}
for (const radio of radioBubbles1_1) {
if (radio.checked) {
totalPrice = totalPrice * parseFloat(radio.value);
console.log(totalPrice);
}
}
for (const radio of radioBubbles2) {
if (radio.checked) {
totalPrice = totalPrice * parseFloat(radio.value);
console.log(totalPrice);
}
}
for (const radio of radioBubbles3) {
if (radio.checked) {
totalPrice = totalPrice * parseFloat(radio.value);
console.log(totalPrice);
}
}
basePrice.innerText = totalPrice.toFixed(2);
}
This Pen doesn't use any external JavaScript resources.