Задать вопрос
@vladimir328
javascript

Подтормаживает калькулятор.Как это исправить?

Спустя несколько действий(изменения количества на стрелках) скрипт на пару секунд зависает.Как это исправить?

<!DOCTYPE html>
<html lang="ru">
<head>
        <title>Калькулятор на JavaScript</title>
        
        <script type="text/javascript">
       /*
        * Функция подсчета стоимости услуг на создания дизайна сайта
        */
        function calc() {
            //получаем ссылку на элемент Select (Тип дизайна)
            var type_design = document.getElementById("type_design");
            //получаем ссылку на чекбокс (Требуется верстка?)
            var is_html = document.getElementById("is_html");
            //получаем ссылку на элемент input (Кол-во вариантов)
            var count = document.getElementById("count");
            //получаем ссылку на элемент span, в него будем писать стоимость дизайна
            var result = document.getElementById("result"); 
 
            var price = 0;
            price += parseInt(type_design.options[type_design.selectedIndex].value);
            
            price = parseInt(count.value) * price;
 
            result.innerHTML = price;
        }
 
</script>
    </head>
    <body>
        <b>номер:</b><br/>
        <select onchange="calc()" id="type_design">
            <option value="0">Выбрать</option>
            <option value='2800'>M100</option>
            <option value="2900">M150</option>
            <option value="3100">M200</option>
            <option value="3300">M250</option>
            <option value="3500">M300</option>
            <option value="3600">M350</option>
            <option value="3800">M400</option>
        </select><br/>
        
        <br/>
        количество: <input type="number" id="count" value="1" onchange="calc()" />
        <div>Приблизительная стоимость: <span id="result">0</span> руб.</div>
    </body>


</html>
  • Вопрос задан
  • 87 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
SagePtr
@SagePtr
Еда - это святое
1) В каком именно браузере подтормаживает? Ни в хроме, ни в файрфоксе ничего не тормозит.
2) Причём тут jQuery вообще?

Могу предполагать, что ваш браузер не сразу шлёт событие change (ради экономии чего-нибудь ограничивает частоту событий и при частых событиях откладывает на несколько секунд) , так как в коде нет ничего такого, что может на пару секунд подвиснуть.
Ответ написан
Комментировать
Комментировать
mills
@mills
Калькулятор работает без тормозов, добавить доп список без проблем, вот пример:

<!DOCTYPE html>
<html lang="ru">
<head>
        <title>Калькулятор на JavaScript</title>
        
        <script type="text/javascript">
       /*
        * Функция подсчета стоимости услуг на создания дизайна сайта
        */
        function calc() {
            //получаем ссылку на элемент Select (Тип дизайна)
            var type_design = document.getElementById("type_design");
            var type_design_dop = document.getElementById("type_design_dop");
            //получаем ссылку на чекбокс (Требуется верстка?)
            var is_html = document.getElementById("is_html");
            //получаем ссылку на элемент input (Кол-во вариантов)
            var count = document.getElementById("count");
            //получаем ссылку на элемент span, в него будем писать стоимость дизайна
            var result = document.getElementById("result"); 
 
            var price = 0;
            price += parseInt(type_design.options[type_design.selectedIndex].value);
            price += parseInt(type_design_dop.options[type_design_dop.selectedIndex].value);
            
            price = parseInt(count.value) * price;
 
            result.innerHTML = price;
        }
 
</script>
    </head>
    <body>
        <b>номер:</b><br/>
        <select onchange="calc()" id="type_design">
            <option value="0">Выбрать</option>
            <option value='2800'>M100</option>
            <option value="2900">M150</option>
            <option value="3100">M200</option>
            <option value="3300">M250</option>
            <option value="3500">M300</option>
            <option value="3600">M350</option>
            <option value="3800">M400</option>
        </select><br/>

        <b>Дополнительный список:</b><br/>
        <select onchange="calc()" id="type_design_dop">
            <option value="0">Выбрать</option>
            <option value='1000'>Значение стоит 1000</option>
            <option value="1500">Значение стоит 1500</option>
            <option value="2000">Значение стоит 2000</option>
            <option value="2500">Значение стоит 2500</option>
            <option value="3000">Значение стоит 3000</option>
            <option value="4500">Значение стоит 4500</option>
            <option value="5000">Значение стоит 5000</option>
        </select><br/>
        
        <br/>
        количество: <input type="number" id="count" value="1" onchange="calc()" />
        <div>Приблизительная стоимость: <span id="result">0</span> руб.</div>
    </body>


</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
После обновления перестал работать старый сайт на Wordpress
23 нояб. 2024, в 19:29
750 руб./за проект
Требуется реализовать backend-часть проекта
23 нояб. 2024, в 19:14
35000 руб./за проект
Развернуть OpenSource софт на сервере
23 нояб. 2024, в 17:32
5000 руб./за проект
Ещё заказы