Всем привет. Есть у каждого 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; }); }) }
@pro100blich вот так это делается, с тебя пивко HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Товары</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm"> <div class="border p-3"> <label>Вид товара 1</label> <select class="form-control m-2"> <option selected disabled>--</option> <option value="1" price="203">молоко</option> <option value="2" price="30">ананас</option> <option value="3" price="40">яблоко</option> </select> <label>Количество товара 1</label> <input type="number" class="form-control m-2" value="1"> <button type="button" class="btn btn-primary add-product-js">Добавить в корзину</button> </div> <div class="border p-3"> <label>Вид товара 2</label> <select class="form-control m-2"> <option selected disabled>--</option> <option value="4" price="203">пп</option> <option value="5" price="30">ррр</option> <option value="6" price="40">яблокоrew</option> </select> <label>Количество товара 2</label> <input type="number" class="form-control m-2" value="1"> <button type="button" class="btn btn-primary add-product-js">Добавить в корзину</button> </div> <div class="border p-3"> <label>Вид товара 3</label> <select class="form-control m-2"> <option selected disabled>--</option> <option value="7" price="203">2око</option> <option value="8" price="30">2анас</option> <option value="9" price="40">2локо</option> </select> <label>Количество товара 3</label> <input type="number" class="form-control m-2" value="1"> <button type="button" class="btn btn-primary add-product-js">Добавить в корзину</button> </div> </div> <div class="col-sm"> <table class="table table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Товар</th> <th scope="col">Количество</th> <th scope="col">Цена</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </body> </html> Код (Javascript): let result = [], tbody = document.querySelector("tbody"); document.onclick = function(event) { let target = event.target, add = target.classList.contains("add-product-js"); if(add){ let product = target.parentNode.querySelector("select"); price = product.options[product.selectedIndex].getAttribute('price'); i = product.options[product.selectedIndex].value, qual = target.parentNode.querySelector("input").value, name = product.options[product.selectedIndex].innerHTML, summ = price * qual; result[i] = { 'summ' : summ, 'name' : name, 'qual' : qual } let tr = '', full = 0; result.forEach(function(element) { tr += '<tr>' + '<td>' + element.name + '</td>' + '<td>' + element.qual + '</td>' + '<td>' + element.summ + '</td>' + '</tr>'; full += element.summ; }); tr += '<tr>' + '<td colspan="3"> Сумма: ' + full + '</td>' + '</tr>'; tbody.innerHTML = tr; } }