Показывать div, когда выпадающая сумма трех больше 300

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.

Создайте две функции, одна из которых добавит событие change к каждому из этого выбора, поэтому при каждом изменении выбора эта функция сработает, а в другой функции при каждом изменении выбора получите значение из каждого элемента выбора и сделать суммирование этих значений, чтобы показать / скрыть 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>