Вход

Просмотр полной версии : Калькулятор с радиокнопками Срочно

AaronWolfsberg
04.04.2020, 20:40
Добрый вечер, дорогие форумчане!

Пытался написать простейший калькулятор с радиокнопками, но заплутал и ищу помощи)

Раньше были чекбоксы, заменил их на радиокнопки, смог добиться чтобы можно было выбрать сразу обе кнопки - сумму считает.
Но при снятии флажка ни в какую не хочет убавлять сумму назад.

Делюсь ссылкой на код в JSFiddle (https://jsfiddle.net/AaronWolfsberg/5gdwL1vx/), очень надеюсь на вашу помощь)
рони
04.04.2020, 21:20
AaronWolfsberg,
всем кнопкам присвоить один класс,цену перенести в value , добавить форму, и по change формы выбирать все класс:checked и в цикле формировать сумму всех выбранных кнопок.
AaronWolfsberg
05.04.2020, 17:43
Не до конца понимаю насчет формы и "по change формы":no: :blink:
AaronWolfsberg
05.04.2020, 17:44
AaronWolfsberg,
всем кнопкам присвоить один класс,цену перенести в value , добавить форму, и по change формы выбирать все класс:checked и в цикле формировать сумму всех выбранных кнопок.
Не до конца понимаю насчет формы и "по change формы"
рони
05.04.2020, 17:49
Не до конца понимаю насчет формы

нужен блок в котором будут ваши кнопки, логично если это будет форма.
AaronWolfsberg
05.04.2020, 17:52
По сути всё, что мне нужно - чтобы "калькулятор" при нажатии на левую радиокнопку выдавал число 170, на правую 680. В случае если обе радиокнопки активны - складывал сумму. Ну и при отключении копки "откатывал" к прошлому числу.
AaronWolfsberg
05.04.2020, 17:53
Нет, нет мне необходимо чтобы внешний вид оставался именно таким
MC-XOBAHCK
05.04.2020, 18:02
Я извиняюсь, радиокнопки чтобы выбирать сразу две кнопки???

Зачем тогда радиокнопки? Почему не чекбоксами?
AaronWolfsberg
05.04.2020, 18:03
В данный момент код Java предназначен для вычисления данных из чекбоксов, что нужно поменять чтобы он считал данные из радиокнопок?

Надеюсь смог кк-то объяснить

вот код

var Calculator = {
selectedGroups: [],
sum: 0,

isGroupSelected: function(groupId) {
return this.selectedGroups.indexOf(groupId) != -1;
},

addSelected: function(groupId, amount) {
if (!this.isGroupSelected(groupId)) {
this.changeSum(amount);
}
this.selectedGroups.push(groupId);
},

removeSelected: function(groupId, amount) {
if (!this.isGroupSelected(groupId)) {
return;
}
var groupIndex = this.selectedGroups.indexOf(groupId);
this.selectedGroups.splice(groupIndex, 1);
if (!this.isGroupSelected(groupId)) {
this.changeSum(-amount);
}
},

onSelect: function(groupId, amount, elem) {
if (elem.checked) {
this.addSelected(groupId, amount);
} else {
this.removeSelected(groupId, amount);
}
},

changeSum: function(amount) {
this.sum += amount;
this.showSum();
},

showSum: function() {
document.getElementById ('r').innerHTML = this.sum;
}

}
AaronWolfsberg
05.04.2020, 18:04
Я извиняюсь, радиокнопки чтобы выбирать сразу две кнопки???

Зачем тогда радиокнопки? Почему не чекбоксами?
Мне нужны круглые чекбоксы)
AaronWolfsberg
05.04.2020, 18:05
Вот так выглядит HTML часть

<div>
<label>250г <input type="radio" onclick="Calculator.onSelect(1, 170, this);clickRadio(this)" name="radio" value="170" /></label>

<label>1000г <input type="radio"
onclick="Calculator.onSelect(2, 680, this);clickRadio(this)" name="radio" value="680" /> </label>


<div class="formInputBlock">
<br />
<b> <span id="r" name="sum">0</span> грн.
<div>
MC-XOBAHCK
05.04.2020, 18:13
У вас в html полно ошибок.
А радиокнопки - это переключатель, где можно выбрать один вариант. В этом их предназначение. Только один.
рони
05.04.2020, 18:19
AaronWolfsberg,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>

<script>
addEventListener( "DOMContentLoaded" , function() {
function showTotal()
{
var total = Array.prototype.reduce.call(document.querySelector All(".sum:checked"),
function(sum, elem) {
return sum + +elem.value
}, 0);
document.querySelector("output").innerHTML = total.toFixed(2)
}
function clickRadio(event)
{ //зачем radio работать как checkbox, одному вам известно
var target = event.target;
if(target.closest(".sum[type='radio']")) {
var check = target.classList.contains("check");
target.classList.toggle("check");
target.checked = !check;
showTotal();
}
}

document.querySelector("form").addEventListener("change", showTotal)
document.querySelector("form").addEventListener("click", clickRadio)


});
</script>
</head>
<body>
<form action="http://">
<label><input name="" type="radio" class="sum" value="2.5">спички 100шт.</label>
<label><input name="" type="radio" class="sum" value="100">гречка 1кг</label>
<label><input name="" type="checkbox" class="sum" value="333">сахар 1кг</label>
</form>
<output></output>
</body>
</html>
AaronWolfsberg
05.04.2020, 18:19
Возможно ли это реализовать? Или как-то "закруглить" чекбоксы?)
AaronWolfsberg
05.04.2020, 18:20
Спасибо большое))
рони
05.04.2020, 18:21
А радиокнопки - это переключатель, где можно выбрать один вариант. В этом их предназначение. Только один.
:yes:
AaronWolfsberg
05.04.2020, 18:22
:yes:

Понял))
рони
05.04.2020, 18:35
Или как-то "закруглить"
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.sum + span{
background-color: #D3D3D3;
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-block;
border: 4px solid #8B4513;
}
.sum:checked + span {
background-color: #006400;
}
.sum{
display: none;
}

</style>

<script>
addEventListener( "DOMContentLoaded" , function() {
function showTotal()
{
var total = Array.prototype.reduce.call(document.querySelector All(".sum:checked"),
function(sum, elem) {
return sum + +elem.value
}, 0);
document.querySelector("output").innerHTML = total.toFixed(2)
}
document.querySelector("form").addEventListener("change", showTotal)
});
</script>
</head>
<body>
<form action="http://">
<label><input name="" type="checkbox" class="sum" value="2.5"><span class="checkmark"></span>спички 100шт.</label>
<label><input name="" type="checkbox" class="sum" value="100"><span class="checkmark"></span>гречка 1кг</label>
<label><input name="" type="checkbox" class="sum" value="333"><span class="checkmark"></span>сахар 1кг</label>
</form>
<output></output>
</body>
</html>
MC-XOBAHCK
05.04.2020, 18:51
Вот ещё такое решение:

<div>
<input type="checkbox" name="price" value="170"/>
<label>250г</label>
</div>
<div>
<input type="checkbox" name="price" value="680"/>
<label>1000г</label>
</div>
<div>
<input type="checkbox" name="price" value="680"/>
<label>1000г</label>
</div>
<div>
<input type="checkbox" name="price" value="680" />
<label>1000г</label>
</div>

<hr>

<div>
<span id="result">0</span> грн.
</div>

<script>
let result = document.querySelector('#result');

function sum() {
let checks = document.querySelectorAll('input[name="price"]:checked');
let prices = [];
let summa;

if (checks.length > 0) {
checks.forEach(el => prices.push(+el.value));
summa = prices.reduce((acc, element) => acc + element);
}
else summa = 0;

result.textContent = summa;
}

document.querySelectorAll('input[name="price"]').forEach(el => el.addEventListener('input', sum));
</script>