Javascript-форум - Простенький калькулятор для сайта

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Простенький калькулятор для сайта (https://javascript.ru/forum/misc/42287-prostenkijj-kalkulyator-dlya-sajjta.html)

coloboque

20.10.2013 21:13

Простенький калькулятор для сайта

Всем привет!
Для начала - я не программист) но посмотрела пару уроков(пока что) на javascript т.к. мне для сайта нужен написать калькулятор, а программисты заломили цены >___<
Учитывая что, калькулятор нужно будет постпенно обновлять, добавлять пункты, то я больше потрачу чем заработаю своим горе-сайтом) Так что решила научится сама :victory:

Итак) Калькулятор шкафов-купе) Точнее их дверей)
Дано. Есть профиль дверей. у него фиксированные цены, зависят от количества дверей и ширины шкафа( цены вот:
https://dl.dropboxusercontent.com/u/...46.54%20PM.png
Есть наполнение дверей (стекло, зеркало, ДСП и т.д.), цена за метр квадратный.
2 двери нельзя - нельзя при ширине проема больше 2950мм, только 3 и 4.

Галочка доставка - добавляет 1000р
Галочка установка - умножает количество дверей на 700р.
Галочка нанесение пескоструйнх рисунков - 1350 * кол-во дверей.

Есть задача которые я не знаю как решить, и прошу у вас совета.
1)Сделать option количества дверей 2 неактивными(или удалить его вообще) при ширине шкафа больше 2950мм.
2)Сделать галочку пескоструные рисунки неактивной если выбран ротанг или ДСП( только для зеркала и стекла это возможно)

Есть конечно еще куча идей, но потом.

Не ругайте сильно - вот что у меня получилось:

<script type="text/javascript">
function calc() {
var opt = document.getElementById("2dveri");
var vis = document.getElementById("vis");
var shir = document.getElementById("shir");
var dveri = document.getElementById("dveri");
var fill = document.getElementById("fill");
var dost = document.getElementById("dost");
var ust = document.getElementById("ust");
var result = document.getElementById("result");
var sq = parseInt(shir.value) * parseInt(vis.value);
var filling = parseInt(fill.options[fill.selectedIndex].value);
var cdveri = parseInt(dveri.options[dveri.selectedIndex].value);
var profil;
if ((parseInt(shir.value <= 2950) && (cdveri == 2)){
profil = 3960;
}
else if ((parseInt(shir.value) <= 2950) && (cdveri == 3)){
profil = 4950;
}
else if ((parseInt(shir.value) <= 2950) && (cdveri == 4)){
profil = 5940;
}
else if ((parseInt(shir.value) >= 2950) && (cdveri == 3)){
profil = 6930;
}
else if ((parseInt(shir.value) >= 2950) && (cdveri == 4)){
profil = 7810;
}
else{
profil = 0;
};
var ustanovka = (ust.checked == true) ? parseInt(ust.value) * cdveri : 0;
var dostavka = (dost.checked == true) ? parseInt(dost.value) : 0;
var risunok;
if ((filling == 2 || 3) && (ris.checked == true)) {
risunok = parseInt(ris.value) * sq/1000000;
}
else {risunok = 0;
};

var price = 0;
price += (Math.ceil(sq * filling/1000000 + profil + dostavka + ustanovka +risunok )) ;
result.innerHTML = price;}

</script>

<input id="vis" type="text" value="2300" onchange="calc()" /> высота, в мм
<br/>
<input id="shir" type="text" value="2500" onchange="calc()" /> ширина, в мм
<br/><b>Наполнение:</b><br/>

<select onchange="calc()" id="fill">
<option value="0">Выбрать</option>
<option value="1300">Стекло</option>
<option value="1500">Зеркало </option>
<option value="1400">Ротанг</option>
<option value="1400">ДСП</option>
</select><br/>
<b>Кол-во дверей:</b><br/>
<select onchange="calc()" id="dveri">
<option value="0">Выбрать</option>
<option id="2dveri" value="2">2</option>
<option id="3dveri" value="3">3</option>
<option id="4dveri" value="4">4</option>
</select><br/>
<input type="checkbox" onchange="calc()" value="333" id="dost" />
<label for="dost">Требуется доставка?</label>
<br/>
<input type="checkbox" onchange="calc()" value="555" id="ust" />
<label for="ust">Требуется установка?</label>
<br/>
<input type="checkbox" onchange="calc()" value="1350" id="ris" />
<label for="ris">
Нанесение пескоструйных рисунков</label>

<div>Примерная стоимость дверей: <span id="result">0</span> руб.</div>

Вот ! Жду ваших советов))) Спасибо! :-?

BETEPAH

20.10.2013 23:03

здесь пропущена закрывающая скобка

if ((parseInt(shir.value <= 2950) && (cdveri == 2)){

Цитата:

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

2 двери нельзя - нельзя при ширине проема больше 2950мм, только 3 и 4.

Только 3 и 4?
Или 0, 3 и 4?
Что делать, если у пользователя было выбрано 2 двери, а затем он увеличил ширину проема? Сбрасывать на 0 или увеличивать до 3?

BETEPAH

21.10.2013 01:15

Проверяйте на расчетах, потому что вот это в вашем коде не учитывается почему-то

Цитата:

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

Галочка доставка - добавляет 1000р
Галочка установка - умножает количество дверей на 700р.
Галочка нанесение пескоструйнх рисунков - 1350 * кол-во дверей.

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Калькулятор</title></head>
<body>
<form id="form" name="form">
	<input id="vis" type="text" value="2300" /> высота, в мм
	<br/>
	<input id="shir" type="text" value="2500" /> ширина, в мм
	<br/>
	<b>Наполнение:</b>
	<br/>
	<select id="fill">
		<option value="0">Выбрать</option>
		<option value="1300">Стекло</option>
		<option value="1500">Зеркало </option>
		<option value="1400">Ротанг</option>
		<option value="1400">ДСП</option>
	</select><br/>
	<b>Кол-во дверей:</b>
	<br/>
	<select id="dveri">
		<option value="0">Выбрать</option>
		<option id="2dveri" value="2">2</option>
		<option id="3dveri" value="3">3</option>
		<option id="4dveri" value="4">4</option>
	</select>
	<br/>
	<input type="checkbox" value="1000" id="dost" />
	<label for="dost">Требуется доставка?</label>
	<br/>
	<input type="checkbox" value="700" id="ust" />
	<label for="ust">Требуется установка?</label>
	<br/>
	<input type="checkbox" value="1350" id="ris" />
	<label for="ris">Нанесение пескоструйных рисунков</label>

	<div>Примерная стоимость дверей: <span id="result">0</span> руб.</div>
</form>
<script>
document.body.onload = function() {
	function calc() {
		var d = document, profil = risunok = ustanovka = dostavka = 0;
		var vis = +d.getElementById("vis").value,
		shir = +d.getElementById("shir").value,
		dveri = d.getElementById("dveri"),
		fill = d.getElementById("fill"),
		dost = d.getElementById("dost"),
		ust = d.getElementById("ust"),
		ris = d.getElementById("ris"),
		result = d.getElementById("result");
		
		if(shir > 2950) {
			if(dveri.options[dveri.selectedIndex].value == '2') {
				dveri.options[2].selected = true;
			}
			d.getElementById('2dveri').style.display = 'none';
		} else d.getElementById('2dveri').style.display = '';
		
		if(fill.selectedIndex == 3 || fill.selectedIndex == 4) {
			ris.checked = false;
			ris.disabled = true;
		} else {
			ris.disabled = false;
		};
		
		var sq = shir * vis / 1000000,
		cdveri = +dveri.value;
		if (shir <= 2950 && cdveri == 2) profil = 3960;
		else if (shir <= 2950 && cdveri == 3) profil = 4950;
		else if (shir <= 2950 && cdveri == 4) profil = 5940;
		else if (shir >= 2950 && cdveri == 3) profil = 6930;
		else if (shir >= 2950 && cdveri == 4) profil = 7810;
		if (ust.checked) ustanovka = +ust.value * cdveri;
		if (dost.checked) dostavka = +dost.value;
		if (ris.checked) risunok = +ris.value * cdveri;
		result.innerHTML = Math.ceil(sq * +fill.value + profil + dostavka + ustanovka + risunok );
	};
	document.form.onchange = calc;
	calc();
}
</script>
</body>
</html>

Цитата:

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

программисты заломили цены >___<

А можно узнать сколько заломили?

coloboque

21.10.2013 14:49

Спасибо! Странно - каким то чудом все таки работал мой код))
http://yarkoyarko.ru/calc.html

По поводу дверей.
Я посовещелась с мастером на производстве и он мне сказал что двери наилучшим образом делать так:
Ширина проема от 600мм до 6000мм. Если пользователь ввел меньше/больше, выводить сообщение что мы не изготоваливаем такие размеры.
Ширина проема делится на 1200(это макисмально возможная ширина одной двери) - получается минимальное количество дверей. Больше можно , меньше нельзя.

Нарпример, пользователь ввел ширину 2500.
Минимальное количество дверей для него - 3. Ширина каждой двери 834мм.

Количество дверей макисмальное - пускай будет 10(никто столько не заказывает, но пусть будет...) т.е. от 2 до 10.

Вообщем до момента как скрывать/делать неактивными элементы option в selecte мне все более или менее ясно..
Если ширину увеличили, то дверей должно стать например 3, но человек может выбрать и 4 и больше. Главное сделать недоступным то количество дверей при котором ширина одной двери становится больше 1200мм.

Вот нашла код где похожа задача(с деактивацией списка). Но немного не та))) Когда выбрана 1 опция то другая опция становится недоступна.

http://jsfiddle.net/davidThomas/qE4fN/

Что касается вопроса сколько заламывали цену - от 15 000р.
Я начинаю свое дело без денег(их просто нет), которое еще не изветно пойдет или нет, поэтому мне сумма эта неподъемная, и сайт сделала сама на шаблончике) А дальнейшем я конечно сделала бы все в лучшем виде...

Спасибо..

coloboque

21.10.2013 14:51

у меня там стояло value 333 и 555)) я пока писла цифры от балды главное чтоб работали!))
<input type="checkbox" onchange="calc()" value="333" id="dost" />
<input type="checkbox" onchange="calc()" value="555" id="ust" />

BETEPAH

21.10.2013 14:55

Цитата:

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

Если ширину увеличили, то дверей должно стать например 3, но человек может выбрать и 4 и больше.

я так и сделал вроде в скрипте.

Цитата:

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

Что касается вопроса сколько заламывали цену - от 15 000р.

да, имхо это много за полчаса-час работы. В следующий раз обращайтесь, сойдемся в цене :)

coloboque

21.10.2013 15:56

ну видят человек не слишком сведущий) и разводят как лоха ..)

coloboque

21.10.2013 16:24

о! я только сейчас заметила, что 2 двери стали неактивные) Спасибо!!
Почему то у меня 2ка по прежнему черная - поэтому я не сразу заметила!! может ее както сделать по аналогии с ris.disabled = true;, который серым становится,
типа
d.getElementById('2dveri').disabled = true;
Попробовала подставить- не работает)

а нет, работает!

BETEPAH

21.10.2013 17:04

Вложений: 2

Цитата:

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

Почему то у меня 2ка по прежнему черная - поэтому я не сразу заметила!!

хм... у меня вот так: если ширина большая, то 2ки нет в выборе. При этом если до того, как ширина стала большой, была выбрана 2ка, выбор автоматически переключается на 3ку
Если выбран ротанг и ДСП, то галочка рисунка становится неактивной. Если до выбора галочка стояла, она автоматически снимается.

coloboque

21.10.2013 17:12

а у меня видно... Браузер Chrome.

Перескакивает автоматически, это да. Выбрать ее невозможно, то есть все верно кроме того что по прежнему видно.

Я попробовала через - d.getElementById('2dveri').disabled = true; - становится неактивной серой как и чекбокс пескоструных рисунков.

UPD. В Firefox не видно! в Chrome видно, в Safari видно.

BETEPAH

21.10.2013 17:23

Цитата:

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

Я попробовала через - d.getElementById('2dveri').disabled = true; - становится неактивной серой как и чекбокс пескоструных рисунков.

Думаю, это даже правильнее с точки зрения UI, чем убирать пункт полностью, показать, что такой пункт возможен, но в данной конфигурации он неактивен. Тогда всё? Вопросов не осталось?

coloboque

21.10.2013 19:08

Нет еще не все)))) потрепите меня)) я переделала код под новые входные данные. Теперь цена есть за 1 дверь - дверь до 600мм, дверь до 800мм, дверь до 1200(это максимальная возможная ширина двери)

вот что у меня получилось:
http://yarkoyarko.ru/calc3.html
Проблемы:
1)пока не выбранно количество дверей - получается Infinity. Я думала от деления на 0) Я и убирала 0 из value и заменяла еденицей - не помогло...
2) И автоматическое перескакивание пропало...

рони	21.10.2013 20:22

coloboque,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>

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

    <input id="vis" type="text" value="2300" /> высота, в мм

    <br/>

    <input id="shir" type="text" value="3800" /> ширина, в мм

    <br/>

    <b>Наполнение:</b>

    <br/>

    <select id="fill">

        <option>Выбрать</option>

        <option value="1300">Стекло</option>

        <option value="1500">Зеркало </option>

        <option value="1400">Ротанг</option>

        <option value="1400">ДСП</option>

    </select><br/>
    <div>Рекомендованное количество дверей: <span id="recdver">0</span> шт.</div>

          <div>Минимальное количество дверей: <span id="mindver">0</span> шт.</div>




    <b>Кол-во дверей:</b>

    <br/>

    <select id="dveri">

<option value="0">Выбрать</option>

<option id="2dveri" value="2">2</option>
<option id="3dveri" value="3">3</option>
<option id="4dveri" value="4">4</option>
<option id="5dveri" value="5">5</option>
<option id="6dveri" value="6">6</option>
<option id="7dveri" value="7">7</option>
<option id="8dveri" value="8">8</option>


    </select>
    <div>Ширина 1ой двери: <span id="sh1dver">0</span> мм.</div>

    <br/>

    <input type="checkbox" value="1000" id="dost" />

    <label for="dost">Требуется доставка?</label>

    <br/>

    <input type="checkbox" value="700" id="ust" />

    <label for="ust">Требуется установка?</label>

    <br/>

    <input type="checkbox" value="1350" id="ris" />

    <label for="ris">Нанесение пескоструйных рисунков</label>



    <div>Примерная стоимость дверей: <span id="result">0</span> руб.</div>

</form>

<script>

document.body.onload = function() {

    function calc() {

        var d = document, profil = risunok = ustanovka = dostavka = 0;

        var vis = +d.getElementById("vis").value,

        shir = +d.getElementById("shir").value,

        dveri = d.getElementById("dveri"),

        fill = d.getElementById("fill"),

        dost = d.getElementById("dost"),

        ust = d.getElementById("ust"),

        ris = d.getElementById("ris"),

        result = d.getElementById("result"),

       recvder = d.getElementById("recvder");
        mindver = d.getElementById("mindver");
                sh1dver = d.getElementById("sh1dver");



        if (vis > 2600) {alert('К сожалению, мы производим двери высотой только до 2600мм! Введите другое значение')
};

        if (shir < 600) {alert('Шкаф слишком узкий!')
};

var rec;
rec = Math.ceil(shir/800);

var mindveri;
mindveri = Math.ceil(shir/1200);





        if(mindveri >= 3) {

            if(dveri.options[dveri.selectedIndex].value == '2') {dveri.options[2].selected = true;}

            d.getElementById('2dveri').disabled = true;

       						}
       	else d.getElementById('2dveri').disabled = false;


            if(mindveri >= 4) {

            if(dveri.options[dveri.selectedIndex].value == '3') {dveri.options[3].selected = true;}

            d.getElementById('3dveri').disabled = true;

       						}
       	else d.getElementById('3dveri').disabled = false;


       if(mindveri >= 5) {

            if(dveri.options[dveri.selectedIndex].value == '4') {dveri.options[4].selected = true;}

            d.getElementById('4dveri').disabled = true;

       						}
       	else d.getElementById('4dveri').disabled = false;





        if(fill.selectedIndex == 3 || fill.selectedIndex == 4) {

            ris.checked = false;

            ris.disabled = true;

        } else {

            ris.disabled = false;

        };



        var sq = shir * vis / 1000000,

        cdveri = +dveri.value||mindveri;

        var shirdver;
 		shirdver =  Math.ceil(shir/cdveri);

        if (shirdver <= 600) profil = 2472 * cdveri;

        else if (shirdver <= 800) profil = 2666 * cdveri;

        else if (shirdver <= 1200) profil = 3053.5 * cdveri;

        if (ust.checked) ustanovka = +ust.value * cdveri;

        if (dost.checked) dostavka = +dost.value;

        if (ris.checked) risunok = +ris.value * cdveri;
        recdver.innerHTML = rec;
        mindver.innerHTML = mindveri;
		sh1dver.innerHTML = shirdver;
        result.innerHTML = Math.ceil(sq +(+fill.value||0) + profil + dostavka + ustanovka + risunok );

    };


    document.form.onchange = calc;

    calc();

}

</script>

</body>

</html>

BETEPAH

21.10.2013 20:34

Цитата:

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

потрепите меня

я бы с удовольствием, но жена не разрешает трепать незнакомых девушек :(

coloboque

21.10.2013 23:44

Да и терпеть незнакомых девиц тоже не преветсвуется думаю))Планшет смешные перлы выдает уже не раз)) это еще не самое смешное!!)
Спасибо всем огромное за помощь! Калькулятор объявляю готовым)по крайней мере свою главную функцию он выполняет!

koyot777

17.02.2015 07:46

Добрый день! Решил переделать данный калькулятор для расчета стоимости кровли но т.к. знания поверхностные не могу понять где допустил ошибки. Сильно не ругайте все пытался делать методом тыка.
Вроде считает общую сумму но немогу настроить вывод кол-ва листов шифера и стоимости 1 шт. в зависимости от цвета.

Подскажите, что я упустил или чего перебрал? )) И как можно сделать так чтобы подсчет выводился сразу при вводе площади, а не по клику в другой области? вывод количества листов считается S/1.336 m.

Может кому потом пригодятся подобные наработки)

<!DOCTYPE HTML>
<html>
<head>
  <title>Калькулятор - расчет стоимости кровли</title>
  <meta charset="utf-8">
</head>
<body>

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


<br/>

<input type="radio" id="color1" name="cena" value="272" checked />Серый
<input type="radio" id="color2" name="cena" value="285" />Красный
<input type="radio" id="color3" name="cena" value="275" />Зеленый
<input type="radio" id="color4" name="cena" value="235" />Сланец
 

 <br/><br/>

 
 
 
 <b> ПЛОЩАДЬ КРОВЛИ:</b>  <input id="area" type="text" value="5" /> <b>м2</b>

<br/>
<br/>


<div>Цена: <span id="cena">0</span> руб.</div>  	

<div>Рекомендованное количество шифера: <span id="kol">0</span> шт.</div>

<div>Сумма: <span id="result">0</span> руб.</div>

</form>





<script>

document.body.onload = function() {

    function calc() {

        var d = document, cena = color1 = color2 = color3 = color4 = 0;

        var area = +d.getElementById("area").value,



        color1 = d.getElementById("color1"),

        color2 = d.getElementById("color2"),

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

        result = d.getElementById("result"),

       kol = d.getElementById("kol");


        if (area > 90000) {alert('Вы уверены в правильности введенных данных? Введите другое значение')
};

        if (area < 2) {alert('Площадь слишком мала!')
};

var kol;
kol = Math.ceil(area/1.336);


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

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

        if (color3.checked) cena = +color3.value;
		
		if (color4.checked) cena = +color3.value;
		
        kol.innerHTML = Math.ceil(area/1.336);
        cena.innerHTML = cena;
        result.innerHTML = Math.ceil(kol * cena);

    };


    document.form.onchange = calc;

    calc();

}

</script>

</body>

</html>

рони	17.02.2015 09:09

Цитата:

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

что я упустил или чего перебрал

перепишите название переменных так чтоб они не совпадали с id элементов

Цитата:

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

var area = +d.getElementById("area").value,

Цитата:

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

подсчет выводился сразу при вводе площади

строка 94

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

koyot777

25.02.2015 13:12

Цитата:

Сообщение от рони (Сообщение 356935)

перепишите название переменных так чтоб они не совпадали с id элементов

строка 94

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

Спасибо за помощь.
Скрипт начал выводить кол-во шифера и сумму, но никак не могу заставить его выводить значение цены товара в зависимости от выбора радио кнопки.

поскажите, что у меня там опять не так?

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

<div class="calc-bgarea">

<input type="radio" id="color1" name="cena" value="100" checked />Серый
<input type="radio" id="color2" name="cena" value="285" />Красный<br/>
<input type="radio" id="color3" name="cena" value="275" />Зеленый
<input type="radio" id="color4" name="cena" value="235" />Сланец

<br/>
<br/>
 
 
 
<b> ПЛОЩАДЬ КРОВЛИ:</b>  <input id="area" type="text" value="5" /> <b>M<sup>2</sup></b>

<br/>
<br/>

</div>

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

</div>

<div class="calc-bgtotal">
Цена: <br>                               
Кол-во листов: <br>
Итого: <br>
<div class="calc-bgtotal2">
<span id="cena">0</span> руб.<br>
<span id="kol">0</span>&nbsp; шт.<br>
<span id="result">0</span> руб.
</div>
</div>

</form>



<script>
document.body.onload = function() {

    function calc() {

        var d = document, cena = color1 = color2 = color3 = color4 = 0;

        var areaa = +d.getElementById("area").value,

        color1 = d.getElementById("color1"),
        color2 = d.getElementById("color2"),
        color3 = d.getElementById("color3"),		
		color4 = d.getElementById("color4"),
        result = d.getElementById("result"),
        kol = d.getElementById("kol");


var kolich;
kolich = Math.ceil(areaa/1.336);


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

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

        if (color3.checked) cena = +color3.value;
		
		if (color4.checked) cena = +color4.value;
		
        kol.innerHTML = Math.ceil(areaa/1.336);
        cena.innerHTML = cena;
        result.innerHTML = Math.ceil(kolich * cena);

    };


    document.form.onchange = calc;
	document.getElementById("area").oninput = calc;
    calc();

}

</script>

рони	25.02.2015 13:47

Цитата:

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

перепишите название переменных так чтоб они не совпадали с id элементов

Цитата:

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

cena.innerHTML = cena;

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

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

<div class="calc-bgarea">

<input type="radio" id="color1" name="cena" value="100" checked />Серый
<input type="radio" id="color2" name="cena" value="285" />Красный<br/>
<input type="radio" id="color3" name="cena" value="275" />Зеленый
<input type="radio" id="color4" name="cena" value="235" />Сланец

<br/>
<br/>



<b> ПЛОЩАДЬ КРОВЛИ:</b>  <input id="area" type="text" value="5" /> <b>M<sup>2</sup></b>

<br/>
<br/>

</div>

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

</div>

<div class="calc-bgtotal">
Цена: <span id="cena">0</span> руб.<br>
Кол-во листов: <span id="kol">0</span>&nbsp; шт.<br>
Итого: <span id="result">0</span> руб.<br>
</div>

</form>



<script>
document.body.onload = function() {

    function calc() {
        var d = document, price = 0;
        areaa = +d.getElementById("area").value,
        kolich = Math.ceil(areaa/1.336),
        color1 = d.getElementById("color1"),
        color2 = d.getElementById("color2"),
        color3 = d.getElementById("color3"),
		color4 = d.getElementById("color4"),
        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;
        kol.innerHTML = kolich;
        cena.innerHTML = price;
        result.innerHTML = Math.ceil(kolich * price);
    };
    document.form.onchange = calc;
	document.getElementById("area").oninput = calc;
    calc();

}

</script>

</body>

</html>

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