Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Калькулятор для расчета стоимости на сайте (https://javascript.ru/forum/misc/58489-kalkulyator-dlya-rascheta-stoimosti-na-sajjte.html)

Георгий М. 24.09.2015 21:23

Калькулятор для расчета стоимости на сайте
 
Добрый день, уважаемые форумчане.
Есть задача разработать калькулятор на сайт.
Есть поле куда можно вписать длину и ширину тем самым получить площадь. Затем в зависимости от выбранных галочек radio эта площадь умножается на цену. Таких галочек radio 2 группы - в зависимости от типа и в зависимости от толщины. Однако калькулятор работает лишь с одной группой галочек, добавляя к ней другую группу галочек, он выдавать результат отказывается. Нужна ваша помощь, заранее благодарю.

<body>

<b> ширина:</b>  <input id="shir" type="text" value="5" /> <b>M<sup>2</sup></b>
<b> длина:</b>  <input id="dlin" type="text" value="5" /> <b>M<sup>2</sup></b>

<form id="form" name="form">

<div class="calc-bgarea">

<b> Выберите тип:</b>
<input type="radio" id="color1" name="cena" value="12000" checked />Стандарт

<input type="radio" id="color2" name="cena" value="13000" />Цвет<br/>

<input type="radio" id="color3" name="cena" value="14000" />Стекляшки

<input type="radio" id="color4" name="cena" value="15000" />Плитка

<b> толщина</b>
<input type="radio" id="tolsh1" name="toshina" value="1" checked />Стандарт

<input type="radio" id="tolsh2" name="toshina" value="1000" />Цвет<br/>

<input type="radio" id="tolsh3" name="toshina" value="2000" />Стекляшки

<input type="radio" id="tolsh3" name="toshina" value="3000" />Плитка


</div>
<div class="calc-bg2">
пример сообщени
</div>

<div class="calc-bgtotal">
Итого: <span id="result">0</span> руб.<br>
</div>
</form>

[JS]

<script>

document.body.onload = function() {
 
    function calc() {
        var d = document, price = tolshi = 0;
        shir1 = +d.getElementById("shir").value,
		dlin1 = +d.getElementById("dlin").value,
        sq = Math.ceil(shir1 * dlin1 / 1000000),
        color1 = d.getElementById("color1"),

        color2 = d.getElementById("color2"),

        color3 = d.getElementById("color3"),

        color4 = d.getElementById("color4"),
		
		tolsh1 = d.getElementById("tolsh1"),

        tolsh2 = d.getElementById("tolsh2"),

        tolsh3 = d.getElementById("tolsh3"),

        tolsh4 = d.getElementById("tolsh4"),

        result = d.getElementById("result"),

        kol = d.getElementById("kol");

        if (color1.checked) price = +color1.value;

        if (color2.checked) price = +color2.value;

        if (color3.checked) price = +color3.value;

        if (color4.checked) price = +color4.value;
		
		if (tolsh1.checked) tolshi = +tolsh1.value;

        if (tolsh2.checked) tolshi = +tolsh2.value;

        if (tolsh3.checked) tolshi = +tolsh3.value;

        if (tolsh4.checked) tolshi = +tolsh4.value;

        result.innerHTML = Math.ceil(sq * (price + tolshi));

    };

    document.form.onchange = calc;

    document.getElementById("shir").oninput = calc;

    calc();

 

}
</script>
[/JS]
</body>

ksa 25.09.2015 08:33

Георгий М., ты явно говнокодишь... :)
Просто заплати за тот калькулятор и будет тебе счастие. ;)

EmperioAf 25.09.2015 09:21

Цитата:

Сообщение от Георгий М.
<input type="radio" id="tolsh3" name="toshina" value="2000" />Стекляшки
 
<input type="radio" id="tolsh3" name="toshina" value="3000" />Плитка

у вас нет элемента с id="tolsh4" и поэтому эта строка : if (tolsh4.checked) tolshi = +tolsh4.value;
выдаёт ошибку
Открывайте консоль каждый раз, когда что то не работает.

Георгий М. 25.09.2015 11:28

Цитата:

Сообщение от EmperioAf (Сообщение 389738)
у вас нет элемента с id="tolsh4" и поэтому эта строка : if (tolsh4.checked) tolshi = +tolsh4.value;
выдаёт ошибку
Открывайте консоль каждый раз, когда что то не работает.

Благодарю за ответ, очень помогло.

EmperioAf 25.09.2015 11:40

Цитата:

Сообщение от ksa
Георгий М., ты явно говнокодишь...

калькулятор там небось стилизован так, что пользователь об этом и не догадывается :)

hhh 25.09.2015 13:42

tolshi:)

ksa 25.09.2015 15:23

Цитата:

Сообщение от EmperioAf
калькулятор там небось стилизован так, что пользователь об этом и не догадывается

Я на код его смотрю, не на внешний вид... :)

webgroupco 06.05.2016 18:22

Здравствуйте!

Сделали такой вариант в сочетании с RSForm
Скрипт считает значения value

Код Java (замените переменные на свои)

<script type="text/javascript">
/*
* Функция подсчета стоимости услуг на создания дизайна сайта
*/
function calc() {
//получаем ссылку на элемент Select (Тип дизайна)
var category = document.getElementById("category");
var shablon = document.getElementById("shablon");
var zapolnenie = document.getElementById("zapolnenie");
var logo = document.getElementById("logo");
var design = document.getElementById("design");
var language = document.getElementById("language");
var contentsite = document.getElementById("contentsite");
var mobile = document.getElementById("mobile");



//получаем ссылку на чекбокс (Требуется верстка?)
var modules0 = document.getElementById("modules0");
var modules1 = document.getElementById("modules1");
var modules2 = document.getElementById("modules2");
var modules3 = document.getElementById("modules3");
var modulestoo0 = document.getElementById("modulestoo0");
var modulestoo1 = document.getElementById("modulestoo1");
var modulestoo2 = document.getElementById("modulestoo2");
var modulestoo3 = document.getElementById("modulestoo3");


//получаем ссылку на элемент span, в него будем писать стоимость дизайна
var result = document.getElementById("result");

var price = 0;
price += parseInt(category.options[category.selectedIndex].value);
price += parseInt(shablon.options[shablon.selectedIndex].value);
price += parseInt(zapolnenie.options[zapolnenie.selectedIndex].value);
price += parseInt(logo.options[logo.selectedIndex].value);
price += parseInt(design.options[design.selectedIndex].value);
price += parseInt(language.options[language.selectedIndex].value);
price += parseInt(contentsite.options[contentsite.selectedIndex].value);
price += parseInt(mobile.options[mobile.selectedIndex].value);

price += (modules0.checked == true)? parseInt(modules0.value) : 0;
price += (modules1.checked == true)? parseInt(modules1.value) : 0;
price += (modules2.checked == true)? parseInt(modules2.value) : 0;
price += (modules3.checked == true)? parseInt(modules3.value) : 0;
price += (modulestoo0.checked == true)? parseInt(modulestoo0.value) : 0;
price += (modulestoo1.checked == true)? parseInt(modulestoo1.value) : 0;
price += (modulestoo2.checked == true)? parseInt(modulestoo2.value) : 0;
price += (modulestoo3.checked == true)? parseInt(modulestoo3.value) : 0;



result.innerHTML = price;
}

</script>


<div id="calc-summa-text">Стоимость разработки сайта: <span id="result">0</span> $.</div>


Рабочий пример этого калькулятора https://webgroupco.com/create-site/k...toimosti-sajta


Часовой пояс GMT +3, время: 09:54.