当三个下拉列表的总和大于 300 时显示 div

Question

我不知道如何找出我的问题。 我有三个选择器（下拉菜单），当这三个列表的总和大于 300 时，应该显示一个带有复选框的 div。 当客户想要订购超过 300 种产品时，我的表格可以免费获得一些东西。 我可以在输入中得到这些列表的总和，但是这个输入的值没有显示，所以我不能用它来显示 div：

 //this is not working Event.observe('total', 'keyup', function () { if ($$('#total]')[0].value > 299){ $$('#show300')[0].show(); } else{ $$('#show300')[0].hide(); } });

 <div class="input-group-inzerat"><select name="Produkt 1" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div> <div class="input-group-inzerat"><select name="Produkt 2" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div> <div class="input-group-inzerat"><select name="Produkt 3" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div> <input type="text" name="total" id="total" style="display: block" /> <div class="form-check" id="show300" ><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku &quot;Logo zdarma&quot;</label></div>

有人可以帮助我吗？ 请：）

Answer 1

有多个select具有相同的id 。 id必须是唯一的。 所以你可以使用class 。

Create two functions one which will add event change to each of this select, so whenever select changes that function will trigger and in another function with every change of select get the value from each of the select element and do the summation of those values to show /隐藏div

 const showDiv = document.getElementById('show300'); const elem = document.querySelectorAll('.custom-select1'); calculateTotal = () => { let total = 0; elem.forEach((item) => { total += parseInt(item.value, 10); }); total > 300? showDiv.classList.add('show'): showDiv.classList.remove('show') } elem.forEach((item) => { item.addEventListener('change', calculateTotal) })

 .hide { display: none; }.show { display: block; }

 <div class="input-group-inzerat"> <select name="Produkt 1" class="custom-select1"> <option selected value="0">Množstvo</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> <option value="150">150</option> <option value="200">200</option> <option value="300">300</option> </select> </div> <div class="input-group-inzerat"> <select name="Produkt 2" class="custom-select1"> <option selected value="0">Množstvo</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> <option value="150">150</option> <option value="200">200</option> <option value="300">300</option> </select> </div> <div class="input-group-inzerat"> <select name="Produkt 3" class="custom-select1"> <option selected value="0">Množstvo</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> <option value="150">150</option> <option value="200">200</option> <option value="300">300</option> </select> </div> <input type="text" name="total" id="total" style="display: block" /> <div class="form-check hide" id="show300"><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku &quot;Logo zdarma&quot;</label></div>