Ошибка в коде калькулятора, собранного из двух других

@eldenio · Регистрация: 16.07.2015

Студворк — интернет-сервис помощи студентам

Друзья! Помогите пожалуйста разобраться с проблемой.

Мне нужен калькулятор услуг на сайт. Я нашел два калькулятора, и попробовал ну что-то типа соединить их. В общем, основу взял с одного, немного с другого, получилось что-то общее.

Теперь, когда я открываю страницу в браузере моя функция не запускается, консоль пишет "Uncaught ReferenceError: costCalculator is not defined" (costCalculator это моя функция). Еще консоль почему-то не распознает знак +=, пишет "Uncaught SyntaxError: Unexpected token +=".

Я в JS мягко говоря новичок, и никак не пойму где я накосячил. Помогите пожалуйста разобраться!

Спасибо!

Вот код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Мой калькулятор</title>
    <link rel="stylesheet" href="../legion/css/bootstrap.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="../legion/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <p>Где будет ремонт</p>
        <select onchange="costCalculator()" id="rooms" class="form-control">
            <option value="100">1-к квартира</option>
            <option value="150">2-к квартира</option>
            <option value="200">3-к квартира</option>
            <option value="250">4-к квартира</option>
        </select>
        
        <p>Тип ремонта</p>
        <select onchange="costCalculator()" id="typerepair" class="form-control">
            <option value="2000">Капитальный</option>
            <option value="4000">Косметический</option>
            <option value="6000">Элитный</option>
        </select>
        
        <p>Площадь</p>
        <input id="area" value="0" onchange="costCalculator()" type="text" />
        
        <p>Потолок</p>
        <select onchange="costCalculator()" id="ceiling" class="form-control">
            <option value="500">Натяжной</option>
            <option value="650">Гипрочный</option>
            <option value="850">Штукатурная краска</option>
        </select>
        
        <p>Стены</p>
        <select onchange="costCalculator()" id="wall" class="form-control">
            <option value="430">Визуальное выравнивание</option>
            <option value="910">Выравнивание всех углов под 90 градусов</option>
        </select>
        
<!--
        <p>Необходима разработка дизайн проекта</p>
        <input id="design" value="" onchange="costCalculator()" type="checkbox" />
-->
        
        <p>Нужна разводка электрики</p>
        <input id="electr" value="1" onchange="costCalculator()" type="checkbox" />
        
        <p>Нужна разводка сантехники</p>
        <input id="sunteh" value="25000" onchange="costCalculator()" type="checkbox" />
        
        <p class="result text-center">Предварительная стоимость ремонта: <span id="result">0</span></p>
    </div>
    
    <script>
        function costCalculator() {
        //Типы выбора
        var rooms = document.getElementById("rooms");
        var typerepair = document.getElementById("typerepair");
        var area = document.getElementById("area");
        var ceiling = document.getElementById("ceiling");
        var wall = document.getElementById("wall");
        var electr = document.getElementById("electr");
        var sunteh = document.getElementById("sunteh");
            
        //Результаты выбора
        var result = document.getElementById("rooms");
        var result = document.getElementById("typerepair");
        var result = document.getElementById("area");
        var result = document.getElementById("ceiling");
        var result = document.getElementById("wall");
        var result = document.getElementById("electr");
        var result = document.getElementById("sunteh");
            
        //Общий результат
        var result = document.getElementById("result");
        
        //Рассчет
        var roomsPrice += parseInt(rooms.options[rooms.selectedIndex].value);
        var areaPrice += parseInt(area.value);
        var typerepairPrice += parseInt(typerepair.options[typerepair.selectedIndex].value) * areaPrice;
        var ceilingPrice += parseInt(ceiling.options[ceiling.selectedIndex].value) * typerepairPrice;
        var wallPrice += parseInt(wall.options[wall.selectedIndex].value) * roomsPrice;
        //Считаем электрику
            if (roomsPrice === "100") {var electrPrice += (electr.cheked == true) ? parseInt(electr.value) * 25000;};
            if (roomsPrice === "150") {var electrPrice += (electr.cheked == true) ? parseInt(electr.value) * 40000;};
            if (roomsPrice === "200") {var electrPrice += (electr.cheked == true) ? parseInt(electr.value) * 55000;};
            if (roomsPrice === "250") {var electrPrice += (electr.cheked == true) ? parseInt(electr.value) * 55000;};
        var suntehPrice += (sunteh.cheked == true) ? parseInt(sunteh.value);
            
        //Складываем типы выбора
        price = roomsPrice + typerepairPrice + ceilingPrice + wallPrice + electrPrice + suntehPrice;
            
        resul.innerHTML = price;
        }
    </script>
</body>
</html>

@BANO · 30.06.2016, 02:58

eldenio, потому что должно быть не +=, а просто =

и ещё, меня несколько пугает кусок кода

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        //Результаты выбора
        var result = document.getElementById("rooms");
        var result = document.getElementById("typerepair");
        var result = document.getElementById("area");
        var result = document.getElementById("ceiling");
        var result = document.getElementById("wall");
        var result = document.getElementById("electr");
        var result = document.getElementById("sunteh");
            
        //Общий результат
        var result = document.getElementById("result");

вы ведь понимаете что тут останется только последняя строка?

JavaScript
1
resul.innerHTML = price;

скорее всего является

JavaScript
1
result.innerHTML = price;

а функция не определена потому что является невалидной...
попробуйте написать валидный код, тогда может и сработает

@Raisin Zn · 30.06.2016, 08:18

Немного исправил код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function costCalculator() {
    var rooms       = document.getElementById('rooms').value;
    var typerepair  = document.getElementById('typerepair').value;
    var area        = document.getElementById('area').value;
    var ceiling     = document.getElementById('ceiling').value;
    var wall        = document.getElementById('wall').value;
    var electr      = document.getElementById('electr');
    var sunteh      = document.getElementById('sunteh');
    var electrPrice = 0;
 
    if (electr.checked) {
        if (rooms == 100) {
            electrPrice = Number(electr.value) * 25000;
        }
        else if (rooms == 150) {
            electrPrice = electr.value * 40000;
        }
        else if (rooms == 200) {
            electrPrice = electr.value * 55000;
        }
        else {
            electrPrice = electr.value * 55000;
        };
    };
 
    var suntehPrice = (sunteh.checked) ? sunteh.value : 0;
    var price       = Number(rooms) + Number(typerepair) + Number(ceiling) + Number(wall) + Number(electrPrice) + Number(suntehPrice);
    document.getElementById('result').innerHTML = price;
};

Надеюсь все сделал правильно.

Замените код своей функции на этот, что выйдет?

Добавлено через 59 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function costCalculator() {
    var rooms       = document.getElementById('rooms').value;
    var typerepair  = document.getElementById('typerepair').value;
    var area        = document.getElementById('area').value;
    var ceiling     = document.getElementById('ceiling').value;
    var wall        = document.getElementById('wall').value;
    var electr      = document.getElementById('electr');
    var sunteh      = document.getElementById('sunteh');
    var electrPrice = 0;
 
    if (electr.checked) {
        if (rooms == 100) {
            electrPrice = Number(electr.value) * 25000;
        }
        else if (rooms == 150) {
            electrPrice = Number(electr.value) * 40000;
        }
        else {
            electrPrice = Number(electr.value) * 55000;
        };
    };
 
    var suntehPrice = (sunteh.checked) ? sunteh.value : 0;
    var price       = Number(rooms) + Number(typerepair) + Number(ceiling) + Number(wall) + Number(electrPrice) + Number(suntehPrice);
    document.getElementById('result').innerHTML = price;
};

@eldenio · 30.06.2016, 13:07 **[ТС]**

Спасибо! Так сам скрипт работает, но в нем нет нужного мне умножения. Подскажите пожалуйста, как его туда вставить? Т.е. чтобы переменная typerepair умножалась на area; ceiling на typerepair; а wall на rooms.

(Тип ремонта умножается на квадратные метры, потолки умножаются на тип ремонта, а стены умножаются на значение переменной кол-во комнат (там примерный метраж стен)).

Подскажите пожалуйста как правильно записать эти вычисления, на примере какого-нибудь одного, буду очень благодарен!

Спасибо!

Добавлено через 7 минут
Мне приходит в голову, что это нужно сделать так:

JavaScript
1
var typerepairPrice = parseInt(typerepair.options[typerepair.selectedIndex].value) * area;

И тогда в переменной price я вместо

JavaScript
1
Number(typerepair)

Вставлю

JavaScript
1
Number(typerepairPrice)

Я правильно понимаю?

Добавлено через 1 минуту
И еще вопрос такой, number в данном случае нужен для преобразования значения переменной в число?

@Raisin Zn · 30.06.2016, 13:22

Сообщение от eldenio

var typerepairPrice = parseInt(typerepair.options[typerepair.selectedIndex].value) * area;

А так:

JavaScript
1
var typerepairPrice = Number(typerepair) * Number(area);

Не одно и тоже?

Добавлено через 3 минуты

Сообщение от eldenio

Я правильно понимаю?

Если вам нужен результат умножения typerepair и area в typerepairPrice, то да.

@eldenio · 30.06.2016, 13:28 **[ТС]**

Спасибо большое! Работает! Теперь осталось проверить сами умножения, а то я так наумножал, что у меня ремонт четырёхкомнатной квартиры обходится в 390 млн

Добавлено через 2 минуты
И всё-таки очень интересно, почему мой код оказался не валидным. За основу я брал рабочий пример, всё делал по аналогии с ним.

Вот этот пример, с которого я переписывал:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="container">
<div class="row">
<div class="col-xs-12">
 
<div class="col-md-6">
 
<select onchange="costCalculator()" id="oneType" class="form-control">
<option value="0">Заказать изготовление сайта</option>
<option value="5000">Landing Page</option>
<option value="7000">Сайт портфолио</option>
<option value="20000">Интернет магазин</option>
</select>
<strong>Сумма: от <span id="oneRezult">0</span> <span class="rub">₽</span></strong>
 
<div id="additionally"></div>
<div id="5000" style="display: none">Изготовление <span class="dateTime">1</span> неделя</div>
<div id="7000" style="display: none">Изготовление <span class="dateTime">2</span> недели</div>
<div id="20000" style="display: none">Изготовление <span class="dateTime">1</span> месяц</div>
 
<hr>
 
<p>Подключение домена: <input id="twoType" value="500" onchange="costCalculator()" type="checkbox"></p>
<strong>Сумма: <span id="twoRezult">0</span> <span class="rub">₽</span></strong>
 
<hr>
 
<p>Подключение хостинга 1 год: <input id="twoType1" value="3600" onchange="costCalculator()" type="checkbox"></p>
<strong>Сумма: от <span id="twoRezult1">0</span> <span class="rub">₽</span></strong>
 
<hr>
 
<p>Материалов в магазине: <input id="threeType" value="0" onchange="costCalculator()" type="text"></p>
<strong>Сумма: <span id="threeRezult">0</span> <span class="rub">₽</span> от 100 материалов</strong>
 
<hr>
 
<p class="result text-center">~ <span id="result">0</span> <span class="rub">₽</span></p>
</div>
 
<div class="col-md-6">
<img src="http://atmpl.ru/baner/gif/atmpl-650x480.gif" alt="Банер aTmpl" class="img-responsive center-block">
</div>
 
<div class="col-md-12">
<a href="http://atmpl.ru/index/to_make_responsive_website/0-2" class="btn btn-default btn-lg center-block zakaz">ЗАКАЗАТЬ</a>
</div>
 
</div>
</div>
</div>
<script>
/*!
 * CostCalculator ([url]http://atmpl.ru[/url])
 * Copyright 2014-2015 aTmpl.
 * Licensed under MIT ([url]https://github.com/aTmpl/CostCalculator/blob/master/LICENSE[/url])
 */  
function costCalculator() { 
//Типы выбора
var oneType = document.getElementById("oneType");
var twoType = document.getElementById("twoType");
var twoType1 = document.getElementById("twoType1");
var threeType = document.getElementById("threeType");
//Результаты выбора
var result = document.getElementById("oneType");
var result = document.getElementById("twoType");
var result = document.getElementById("twoType1");
var result = document.getElementById("threeType");
//Общий результат
var result = document.getElementById("result");
//Цена для выбора по умолчанию
var onePrice = 0;
var twoPrice = 0;
var twoPrice1 = 0;
var threePrice = 0;
//Общая цена
var price = 0;
//Умножаем значение на *ЧИСЛО
onePrice += parseInt(oneType.options[oneType.selectedIndex].value);
twoPrice += (twoType.checked == true) ? parseInt(twoType.value) : 0;
twoPrice1 += (twoType1.checked == true) ? parseInt(twoType1.value) : 0;
threePrice += parseInt(threeType.value)*30;
//Складываем типы выбора
price=onePrice + twoPrice + twoPrice1 + threePrice;
//Результат для выбора
oneRezult.innerHTML = onePrice;
twoRezult.innerHTML = twoPrice;
twoRezult1.innerHTML = twoPrice1;
threeRezult.innerHTML = threePrice;
//Общий результат
result.innerHTML = price;
//Дополнительная информация
document.getElementById('additionally').innerHTML = document.getElementById(document.getElementById('oneType').value).innerHTML
}
</script>

@Raisin Zn · 30.06.2016, 16:01

Сообщение от eldenio

Т.е. чтобы переменная typerepair умножалась на area; ceiling на typerepair; а wall на rooms

Видимо вы уже разобрались с эти вопросом. Например, так:

JavaScript
1
var v = Number(wall) * Number(rooms);

Добавлено через 18 минут

Не по теме:

Сообщение от eldenio

Теперь осталось проверить сами умножения, а то я так наумножал, что у меня ремонт четырёхкомнатной квартиры обходится в 390 млн

Нормальный походу будет ремонт!

Попробуйте "поиграть" с цифрами, которые находятся в коде JS/HTML.

@kalabuni · 01.07.2016, 00:09

eldenio, для уменьшения объёма кода и для ускорения его работы уберите все ваши parseInt'ы и Number'ы -- вместо них поставьте плюс перед ссылкой на значение, вот так (см. примеры):
вместо Number(ceiling) пропишите +ceiling
вместо parseInt(twoType.value) пропишите +twoType.value

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	01.07.2016, 00:09
	eldenio, для уменьшения объёма кода и для ускорения его работы уберите все ваши parseInt'ы и Number'ы -- вместо них поставьте плюс перед ссылкой на значение, вот так (см. примеры): вместо Number(ceiling) пропишите +ceiling вместо parseInt(twoType.value) пропишите +twoType.value 1