0

Всем привет.

Есть у каждого select своя сумма, нужно подсчитать общую сумму этих всех select. В Js новичок, пробовал взять все суммы которые получились и засунуть их в перемену, а потом приравнять к id общей суммы, но увы.

И еще, когда выбираешь элемент, он блокируется, но а если случайно нажал, то нужно перезагружать страницу. Может можно сделать, так чтобы можно было очистить выбор каждого поля по отдельности.

Только что заметил, если убрать size, то все больше ничего не работает, почему так происходит?

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;
    });

  })

}
<select id="goods">
  <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">
  <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" >
  <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> рублей

6
  • Вам нужен не select, а список checkbox-ов.
    – user176262
    31 окт 2019 в 3:02
  • В каждом из select'ов подразумевается выбор нескольких позиций? 31 окт 2019 в 4:47
  • Спасибо ребята выручили, есть еще над чем работать, может кто скажет какие видео-курсы или учебник по JS посоветуют 1 ноя 2019 в 0:54
  • @АлексейСергеевич, принято отмечать галкой один из ответов, который вам помог решить задачу.
    – user256824
    1 ноя 2019 в 3:37
  • @АлексейСергеевич learn.javascript.ru . Важно много кодить своими руками. Невозможно научиться чему-то, через просмотр видео под бутер) Смотришь - вроде всё понятно, а когда хочется написать код, оказывается что ничего не запомнил. 1 ноя 2019 в 5:09

2 ответа 2

3

Хотелось немного подправить, случайно всё переписал) Потому что удобно, когда у вас есть шаблонные HTML-"карточки", которые можно взять и штамповать, не думая про разные id и редактирование скрипта. Отдельный вывод того, что выбрано - убрал, потому что и так видно, что выбрано...

let mainSum = document.getElementById('main-sum');
let total = 0;

let select = document.querySelectorAll('.card-select');
for (let i = 0; i < select.length; i++) {
  let cardSum = select[i].querySelector('.card-sum');
  let display = select[i].querySelector('.card-display-selected');  
  let sum = 0; /* Благодаря let, внутри каждого круга цикла создается новая
  переменная со значением 0, которую в дальнейшем можно ииспользовать при клике.
  с 'var' такое бы не прокатило, т.к. он продолжает оставаться видимым в течение цикла */
  
  select[i].addEventListener('click', function(e) {
    let option = e.target.closest('.card-option');
    if (option) {
      total -= sum; // Вначале клика из общей суммы вычесть текущую
      option.classList.toggle('active');
      
      let cost = Number( option.dataset.cost );
      sum = option.classList.contains('active') ? sum + cost : sum - cost;
      cardSum.textContent = sum;
      
      mainSum.textContent = total = total + sum;
      // После всех вычислений, добавить текущую сумму обратно к total.
    }
  });
}
.mama {
  display: inline-flex;
  flex-wrap: wrap;
}

.card-select {
  border: 2px solid #123;
  padding: 5px;
  margin: 5px;
}

.card-option {
  width: 150px;
  background-color: #ddd;
  padding: 3px;
  margin-bottom: 5px;
  cursor: pointer;
}

.card-option::after {
  content: " ( "attr(data-cost) " )";
}

.card-option:hover {
  background-color: #ccc;
}

.card-option.active {
  background-color: #045acf;
  color: white;
}
Общая сумма: <span id="main-sum">0</span><br>
<div class="mama">
  <div class="card-select">
    <div class="card-option" data-cost="200">Молоко</div>
    <div class="card-option" data-cost="100">Мука</div>
    <div class="card-option" data-cost="50">Яйца</div>

    Сумма: <span class="card-sum">0</span>
    <div class="card-display-selected"></div>
  </div>

  <div class="card-select">
    <div class="card-option" data-cost="200">Мясо</div>
    <div class="card-option" data-cost="50">Лук</div>
    <div class="card-option" data-cost="50">Сметана</div>
    <div class="card-option" data-cost="70">Картошка</div>

    Сумма: <span class="card-sum">0</span>
    <div class="card-display-selected"></div>
  </div>

  <div class="card-select">
    <div class="card-option" data-cost="100">Макарошки</div>
    <div class="card-option" data-cost="20">Лук</div>
    <div class="card-option" data-cost="20">Перец</div>
    <div class="card-option" data-cost="10">Томаты</div>

    Сумма: <span class="card-sum">0</span>
    <div class="card-display-selected"></div>
  </div>
</div>

1
  • + за старания ()
    – meine
    1 ноя 2019 в 2:44
2

window.onload = function() {

  // Элемент общей суммы
  const amElm = document.getElementById('amounts');
  
  // Массив хранения значений select'ов
  let amVal = {};
  
  // Перебираем все select'ы
  document.querySelectorAll('.imselect').forEach(function(e) {
  
    // Добавляем событие onChange на текущий select
    e.addEventListener('change', function(e) {
    
      // Записываем в массив значение измененного select'а
      amVal[e.target.id] = parseInt(e.target.value) || 0;
     
      // Обновляем значение элемента суммы select'а
      document.getElementById(e.target.id + '_amount').innerHTML = amVal[e.target.id];
      
      // Подсчитываем общую сумму и меняем значение элемента общей суммы
      let total = 0;
      for (let k in amVal) total += amVal[k];
      amElm.innerHTML = total;
      
    });
    
  });

};
<select id="goods" size="4" class='imselect'>
  <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="goods_amount">0</span> рублей<br> 
Было выбрано:<br><span id="goods_list"></span>
<br><br>
<select id="good" size="4" class='imselect'>
  <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="good_amount">0</span> рублей<br> 
Было выбрано:<br><span id="good_list"></span>
<br><br>
<select id="ool" size="4" class='imselect'>
  <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="ool_amount">0</span> рублей<br>
Было выбрано:<br><span id="ool_list"></span>
<br><br>
Общая сумма: <span id="amounts">0</span> рублей

1
  • 1
    Только, принято вместо innerHTML использовать textContent, когда добавляется строка без HTML-кода) 31 окт 2019 в 5:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.