Не работает калькулятор на JS

Question

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

Нужно сделать чтоб при выборе 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>

Answer 1

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

/*
 * Функция подсчета стоимости услуг на создания дизайна сайта
 */
 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>

Answer 2

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

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>

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

БЛОГ НА HUSL

Не работает калькулятор на JS

Ответы (2 шт):