Всем привет, помогите сделать калькулятор на чистом 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>