pro100blich
Новичок
Всем привет. Есть у каждого select своя сумма, нужно подсчитать общую сумму этих всех select. В Js новичок, пробовал взять все суммы которые получились и засунуть их в перемену, а потом приравнять к id общей суммы, но увы. И еще, когда выбираешь элемент, он блокируется, но а если случайно нажал, то нужно перезагружать страницу. Может можно сделать, так чтобы можно было очистить выбор каждого поля по о дельности.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<select id="goods" size="4">
<option value="-">--</option>
<option value="203" data-id="1">молоко</option>
<option value="30" data-id="2">ананас</option>
<option value="40" data-id="3">яблоко</option>
</select>
<br>
Сумма: <span id="summ">0</span> рублей<br>
Было выбрано:<br>
<span id="list"></span>
<br><br>
<select id="good" size="4">
<option value="-">--</option>
<option value="203" data-id="1">пп</option>
<option value="30" data-id="2">ррр</option>
<option value="40" data-id="3">яблокоrew</option>
</select>
<br>
Сумма: <span id="summ_two">0</span> рублей<br>
Было выбрано:<br>
<span id="list_two"></span>
<br><br>
<select id="ool" size="4">
<option value="-">--</option>
<option value="203" data-id="1">2око</option>
<option value="30" data-id="2">2анас</option>
<option value="40" data-id="3">2локо</option>
</select>
<br>
Сумма: <span id="olo">0</span> рублей<br>
Было выбрано:<br>
<span id="list_olo"></span>
<br><br>
общая сумма: <span id="ob_summ">0</span> рублей
<script src="index.js"></script>
</body>
</html>
JavaScript:
window.onload = function(e){
//3 select
var option_ool = document.querySelectorAll("#ool option");
var list_olo = document.querySelector("#list_olo");
var olo = document.getElementById("olo");
var olo_elem = 0;
option_ool.forEach(function(postBox) {
postBox.addEventListener('click', function() {
list_olo.innerHTML += this.innerHTML+'<br>';
this.classList.add("add_olo");
olo_elem += parseInt(this.getAttribute('data-id'));
olo.innerHTML = olo_elem;
this.disabled = true;
});
})
//2 select
var option_good = document.querySelectorAll("#good option");
var list_two = document.querySelector("#list_two");
var summ_two = document.getElementById("summ_two");
var summ_two_elem = 0;
option_good.forEach(function(postBox) {
postBox.addEventListener('click', function() {
list_two.innerHTML += this.innerHTML+'<br>';
this.classList.add("add_summ_two");
summ_two_elem += parseInt(this.getAttribute('data-id'));
summ_two.innerHTML = summ_two_elem;
this.disabled = true;
});
})
//1 select
var option = document.querySelectorAll("#goods option");
var list = document.querySelector("#list");
var summ = document.getElementById("summ");
var summa_elem = 0;
option.forEach(function(postBox) {
postBox.addEventListener('click', function() {
list.innerHTML += this.innerHTML+'<br>';
this.classList.add("add_summa");
summa_elem += parseInt(this.getAttribute('data-id'));
summ.innerHTML = summa_elem;
this.disabled = true;
});
})
}