0

Всем привет, помогите сделать калькулятор на чистом js, я новичек не совсем понимаю что делаю не так.

  1. Нужно сделать чтоб при выборе select выводилась стоимость выбранного select без участия других параметров. При выборе каждого checkbox добавлялась его стоимость к select (для уменьшения объема кода делаю определение checkbox по class, checkbox будет больше 40). input и range должны быть связаны (вводим значение в поле инпут = меняем положение ползунка и наоборот) и при вводе значения в поле input или изменения положения ползунка select + выбранные чекбоксы умножались на значение (input=range).

Вот о что я делаю

        <b>Тип помещения:</b><br/>
        <select onchange="calc()" id="type_design">
            <option value="500">Квартира</option>
            <option value="700">Офис</option>
            <option value="1000">Коттедж</option>
        </select><br/>
        <input type="checkbox" onchange="calc()" value="300" class="is_html" id="is_html"/> 
        <label for="is_html">Требуется отделка</label>
        <input type="checkbox" onchange="calc()" value="500" class="is_html" id="is_html2"/> 
        <label for="is_html2">Ремонт санузла</label>
        <input type="checkbox" onchange="calc()" value="800" class="is_html" id="is_html3"/> 
        <label for="is_html3">Ремонт кухни</label>
        <br/>
        Площадь: 
        <input type="number" id="count" value="0" onchange="calc()" />
        <input type="range" id="count-range" min="0" max="300" value="0">              
        <div>Стоимость ремонта: <span id="result">0</span> руб.</div>

        <script type="text/javascript">

            /*
             * Функция подсчета стоимости услуг на создания дизайна сайта
             */
             function calc() {
                 let type_design = document.getElementById("type_design"); //получаем ссылку на элемент Select
                 let is_html = document.querySelectorAll(".is_html"); //получаем ссылку на чекбокс
                 let count = document.getElementById("count"); //получаем ссылку на элемент input
                 let countRange = document.getElementById("count-range"); //получаем ссылку на элемент input-range
                 let result = document.getElementById("result"); //получаем ссылку на элемент span, в него будем писать стоимость

                 count = countRange;
                 countRange = count;

                 let price = 0;
                 price += parseInt(type_design.options[type_design.selectedIndex].value);
                 price += (is_html.checked == true) ? parseInt(is_html.value) : 0;
                 price = parseInt(count.value) * price;
     
                 result.innerHTML = price;
             }
     
        </script>
4
  • Добавьте формулу расчёта.
    – UModeL
    14 янв 2021 в 12:50
  • 1
    Формула Тип помещения (любой выбранный параметр) + чекбокс (их будет 40) * площадь помещения. Пример расчета (Офис (700) + Отделка(300)+Санузел(500)+Кухня(800))*площадь (5) = Результат (11500)
    – ziver09
    14 янв 2021 в 13:00
  • добавил ответ. Сходятся вычисления? ;-)
    – UModeL
    14 янв 2021 в 13:38
  • Да, работает верно. Спасибо.
    – ziver09
    14 янв 2021 в 14:29

2 ответа 2

1

Думаю, что правильно будет так:

calc.addEventListener("change", fCalc);
calc.addEventListener("input", fCalc);
/* Функция подсчета стоимости услуг на создания дизайна сайта */
function fCalc(ev) {
  if (ev.target == count_range) {
    count.value = count_range.value;
  } else {
    count_range.value = count.value;
  }
  let nPrice = 0;
  nPrice += parseInt(type_design.options[type_design.selectedIndex].value);
  nPrice += [...calc.querySelectorAll(".is_html")].reduce(function(acc, el) {
    return acc + (el.checked ? parseInt(el.value) : 0);
  }, 0);
  nPrice = parseInt(count.value) * nPrice;
  result.innerHTML = nPrice;
}
fCalc(count_range);
<form id="calc">
  <b>Тип помещения:</b>
  <br />
  <select id="type_design">
    <option value="500">Квартира</option>
    <option value="700">Офис</option>
    <option value="1000">Коттедж</option>
  </select>
  <br />
  <input type="checkbox" value="300" class="is_html" id="is_html" />
  <label for="is_html">Требуется отделка</label>
  <input type="checkbox" value="500" class="is_html" id="is_html2" />
  <label for="is_html2">Ремонт санузла</label>
  <input type="checkbox" value="800" class="is_html" id="is_html3" />
  <label for="is_html3">Ремонт кухни</label>
  <br /> Площадь:
  <input type="number" id="count" min="1" max="300" value="1" />
  <input type="range" id="count_range" min="1" max="300" value="1">
  <div>Стоимость ремонта: <span id="result">0</span> руб.</div>
</form>

Можете добавить хоть миллион чекбоксов (только смотрите на имя класса)

1
  • 1
    Спасибо огромное за помощь, все работает как нужно.
    – ziver09
    14 янв 2021 в 14:04
0

Если добавить логов то можно увидеть где проблемы

/*
 * Функция подсчета стоимости услуг на создания дизайна сайта
 */
 function calc() {
     let type_design = document.getElementById("type_design"); //получаем ссылку на элемент Select
     let is_html = document.getElementById("is_html"); //получаем ссылку на чекбокс
     let is_html2 = document.getElementById("is_html2"); //получаем ссылку на чекбокс
     let is_html3 = document.getElementById("is_html3"); //получаем ссылку на чекбокс
     let count = document.getElementById("count"); //получаем ссылку на элемент input
     let countRange = document.getElementById("count-range"); //получаем ссылку на элемент input-range
     let result = document.getElementById("result"); //получаем ссылку на элемент span, в него будем писать стоимость

     count = countRange;
     countRange = count;

     let price = 0;
     price += +type_design.options[type_design.selectedIndex].value;
     console.log(price);
     price += (is_html.checked == true) ? +is_html.value : 0;
     price += (is_html2.checked == true) ? +is_html2.value : 0;
     price += (is_html3.checked == true) ? +is_html3.value : 0;
     console.log(price);
     price = +count.value * price;
     console.log(price);

     result.innerHTML = price;
 }
<b>Тип помещения:</b><br/>
<select onchange="calc()" id="type_design">
    <option value="500">Квартира</option>
    <option value="700">Офис</option>
    <option value="1000">Коттедж</option>
</select><br/>
<input type="checkbox" onchange="calc()" value="300" class="is_html" id="is_html"/> 
<label for="is_html">Требуется отделка</label>
<input type="checkbox" onchange="calc()" value="500" class="is_html" id="is_html2"/> 
<label for="is_html2">Ремонт санузла</label>
<input type="checkbox" onchange="calc()" value="800" class="is_html" id="is_html3"/> 
<label for="is_html3">Ремонт кухни</label>
<br/>
Площадь: 
<input type="number" id="count" value="0" onchange="calc()" />
<input type="range" id="count-range" min="0" max="300" value="0">              
<div>Стоимость ремонта: <span id="result">0</span> руб.</div>

5
  • У меня основная проблема заключается в том что я не могу понять как мне прибавлять выбранные чекбоксы в расчете. на 1 штуке получается нормально просчитать, а при добавлении несколько. Перестает работать.
    – ziver09
    14 янв 2021 в 13:13
  • @ziver09 Шая подсчитаем 14 янв 2021 в 13:27
  • @ziver09 поправил ответ добавил калькуляцию 14 янв 2021 в 13:35
  • Я так делал. В этом случае работает. Но мне кажется это не совсем правильно, так как 88 строчек кода будет идентичных. Скрипт будет работать, но я хочу понять как это сделать максимально коротко. Cпасибо большое за ответ.
    – ziver09
    14 янв 2021 в 13:44
  • @ziver09 тогда собирайте в массив и итерируйте елементы массива. Как Указал вам UModel в своём ответе 14 янв 2021 в 13:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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