Javascript-форум - Адаптивный калькулятор для web сайта

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

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

- - Адаптивный калькулятор для web сайта (https://javascript.ru/forum/misc/84444-adaptivnyjj-kalkulyator-dlya-web-sajjta.html)

Адаптивный калькулятор для web сайта

Доброго времени суток, выкладываю рабочий скрипт для расчета линолеума:

<h3>Расчет стоимости линолеума</h3>
<select id="cvet">
<option value="serii">Серый</option>
<option value="geltii">Желтый</option>
<option value="goluboi">Голубой</option>
</select>
<input type="text" id="shirina" value="" placeholder="укажите ширину помещения">
<input type="text" id="dlina" value="" placeholder="укажите длину помещения">
<button onclick="raschitat();">Рассчитать стоимость</button>
<div id="ploschad"></div>
<div id="stoimost"></div>
<script type="text/jаvascript">
function raschitat() {
cvet  = document.getElementById('cvet').value;
switch (cvet) {
   case "serii":
      cena = 440;
      break
   case "goluboi":
      cena = 480;
      break   
    case "geltii":
      cena = 380;
      break   
   default:
      cena = 440;
      break
}
shirina  = document.getElementById('shirina').value;
dlina  = document.getElementById('dlina').value;
if(shirina == ""){
alert("Вы не указали ширину");
} else if(dlina == ""){
alert("Вы не указали длину");
} else {
ploschad = parseFloat (shirina)* parseFloat (dlina);
document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" кв. м.";
stoimost = ploschad*cena;
document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";
}
}
</script>

Решил расширить возможности и внести несколько изменений для расчета по строительству из газоблоков:

Добавил третью величину "Высоту" для вычисления площади м3

<input type="text" id="shirina" value="" placeholder="укажите ширину  &nbsp;&nbsp;&nbsp;&nbsp;    ">
<input type="text" id="dlina" value="" placeholder="укажите длину  &nbsp;&nbsp;&nbsp;&nbsp;    ">
<input type="text" id="height" value="" placeholder="укажите высоту  &nbsp;&nbsp;&nbsp;&nbsp;   ">

Ну и соответственно внес проверку в js и остается недоделанная формула. Но формула с зигзагом мне не подвластна, сейчас расскажу.

shirina  = document.getElementById('shirina').value;
    dlina  = document.getElementById('dlina').value;
    height = document.getElementById('height').value;
  

    if(shirina == ""){
    alert("Вы не указали ширину");
    } else if(dlina == ""){
    alert("Вы не указали длину");
    } else if(height == ""){
    alert("Вы не указали высоту");
    } else {
    ploschad = parseFloat (shirina)* parseFloat (dlina)* parseFloat (height);
    document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" куб. м.";
    stoimost =  ploschad*cena;
    document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";
    }
    }

На web ресурсе человек водит ширину, длину и высоту, по скрипту должен получить две графы "Площадь равна" "Стоимость равна".
Для правильного расчета человек смотрит на таб.

https://disk.yandex.ru/i/yaL2mV9Tgpd_6A
т.к. калькулятор считает весь объем, то нам нужна формула она ниже

Код:

(Длина + Ширина) * Высоту * 2 / Кол. Квад. метров стены из одного куба блоков =

При верном расчете, должны получить цену и площадь

https://disk.yandex.ru/i/dgrxuMM7zo-1MA

Дай бог здоровья, кто напряжется понять, что тут накалякал :lol:

square = (parseFloat(width) + parseFloat(length)) * parseFloat(height) * 2 / count

пытался самостоятельно изобразить формулу, но у меня по какой то причине не работает. Мне нужна формула вышенаписанная на js скрипте внедренная под код. Поможет кто?)

bigfooter,

<!DOCTYPE html>
<html>

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

<body>
    <h3>Расчет стоимости линолеума</h3>
    <select id="cvet">
<option value="serii">Серый</option>
<option value="geltii">Желтый</option>
<option value="goluboi">Голубой</option>
</select>
<select id="count">
<option value="13.3">75</option>
<option value="10">100</option>
</select>

    <input type="text" id="shirina" value="5" placeholder="укажите ширину помещения">
    <input type="text" id="dlina" value="5" placeholder="укажите длину помещения">
    <input type="text" id="height" value="5" placeholder="укажите высоту помещения">
    <button onclick="raschitat();">Рассчитать стоимость</button>
    <div id="ploschad"></div>
    <div id="stoimost"></div>
    <div id="square"></div>
    <script>
        function raschitat() {
            let _cvet = document.getElementById('cvet').value, cena;
            switch (_cvet) {
                case "serii":
                    cena = 440;
                    break
                case "goluboi":
                    cena = 480;
                    break
                case "geltii":
                    cena = 380;
                    break
                default:
                    cena = 440;
                    break
            }
            let _shirina = +document.getElementById('shirina').value;
            let _dlina = +document.getElementById('dlina').value;
            let _height = +document.getElementById('height').value;
            let _count = +document.getElementById('count').value;
            if (_shirina == "") {
                alert("Вы не указали ширину");
            } else if (dlina == "") {
                alert("Вы не указали длину");
            } else if (height == "") {
                alert("Вы не указали высоту");
            } else {
                let volume = _shirina * _dlina * _height;
                document.getElementById('ploschad').innerHTML = "Кубатура равна: " + volume + " кв. м.";
                let _stoimost = volume * cena;
                document.getElementById('stoimost').innerHTML = "Стоимость равна: " + _stoimost + " р.";
                let _square = (_dlina + _shirina) * _height * 2 / _count;
                document.getElementById('square').innerHTML = "не знаю что равно: " + _square.toFixed(2) ;

            }
        }
    </script>
</body>

</html>

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

Мне нужно вот эту формулу изобразить на Js

(Длина + Ширина) * Высоту * 2 / Кол. Квад. метров стены из одного куба блоков =

И как мы видим, он продолжает вычислять общею кубатуру а не количество квадратных метров из 1 куба

bigfooter,
что вы написали, то я и сделал.
(Длина + Ширина) * Высоту * 2 / Кол. Квад. метров стены из одного куба блоков =

let _square = (_dlina + _shirina) * _height * 2 / _count;

что не так?

Я чего то не понимаю?

30 let _cvet = document.getElementById('cvet').value, cena;
31 switch (cvet) {

45 let _shirina = +document.getElementById('shirina').value;
49 if (shirina == "") {

и т.д.

Зачем вообще названия локальных переменных начинать с "_"?

Цитата:

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

let _square = (_dlina + _shirina) * _height * 2 / _count;
что не так?

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

Цитата:

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

30 let _cvet = document.getElementById('cvet').value, cena;
31 switch (cvet) {

45 let _shirina = +document.getElementById('shirina').value;
49 if (shirina == "") {

и т.д.

Зачем вообще названия локальных переменных начинать с "_"?

не силен в JS по этому и выложил код на обсуждение, не могу заставить произвести расчет строго по формуле. По этой формуле он должен выдать верную площадь стен и цену, а выдает общею кубатуру и цену за все.

Зашел в exl создал таблицу расчетов, он должен выводить именно эти значения из них я и взял формулу которая собственно написана на верху таблицы https://disk.yandex.ru/i/oSr2ygn8oehDhQ

Цитата:

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

Я чего то не понимаю?

на скорую руку, не хотел иметь переменные и id одинаковыми.

bigfooter,
не могу помочь, не понимаю.