Калькулятор цены с Contact Form WP

@qwerty100 · Регистрация: 14.10.2014

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

Есть 2 выпадающих списка
Из них надо взять данные, в зависимости от этих данных формируется цена
Метровые (твердые порода ) - 650 грн
Метровые ( акация чистая ) - 750 грн
Чурки ( твердая порода ) - 700 грн
Чурки (акация ) - 800 грн
Колотые (Твердая порода ) - 780 грн
Колотые ( Акация ) - 850 грн
Фруктовых - нет наличия
В сетке- нет в наличия
Это всё есть на сайте https://drova-dnepr.000webhostapp.com/
Как всё это реализовать на js?
я просто абсолютный ноль в этом языке
Написал я какой-то такой скрипт

<div class="wrap"><div class="one-third first"><label>Дерево
[select menu-tree id:select-tree "Акация" "Твёрдые породы" "Фруктовые" ]</label></div>
<div class="one-third"><label>Тип[select menu-type id:select-type "Метровые" "Чурки" "Колотые" "В сетке"]</label></div>
<div class="one-third">
<div style="background-color: #fff;border: 1px solid #ddd;color: #000;font-size: 18px;font-size: 1.8rem;font-weight: 400;padding: 16px;width: 100%;"><div id="calculated-price"></div><div id="calc-currency"></div></div>

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
<script>
var tree = document.getElementById("select-tree"),
price = document.getElementById("calculated-price"),
type = document.getElementById("select-type"),
currency = document.getElementById("calc-currency");
tree.oninput=evaluate();
type.oninput=evaluate();
function evaluate(){
if(tree.value == "Фруктовые" || type.value == "В сетке")
{
tree = document.getElementById("select-tree"),
price = document.getElementById("calculated-price"),
type = document.getElementById("select-type"),
currency = document.getElementById("calc-currency");
price.innerHTML="Нет в наличии";
currency.innerHTML="";
}
else if(tree.value == "Акация" && type.value == "Метровые")
{
price.innerHTML="750";
currency.innerHTML=" грн м<sup><small>3</small></sup>";
}
else if(tree.value == "Акация" && type.value == "Чурки")
{
price.innerHTML="800";
currency.innerHTML=" грн м<sup><small>3</small></sup>";
}
else if(tree.value == "Твёрдые породы" && type.value == "Метровые")
{
price.innerHTML="650";
currency.innerHTML=" грн м<sup><small>3</small></sup>";
}
else if(tree.value == "Твёрдые породы" && type.value == "Чурки")
{
price.innerHTML="700";
currency.innerHTML=" грн м<sup><small>3</small></sup>";
}
else if(tree.value == "Акация" && type.value == "Колотые")
{
price.innerHTML="850";
currency.innerHTML=" грн м<sup><small>3</small></sup>";
}
else if(tree.value == "Твёрдые породы" && type.value == "Колотые")
{
price.innerHTML="780";
currency.innerHTML=" грн м<sup><small>3</small></sup>";
}
}
</script>

Но, как видно по ссылке выше, ничего не происходит. Очень надеюсь на Вашу помощь.
Ещё думаю, может это можно реализовать через двумерный массив, но пока не знаю как.
Буду рад любому совету, замечанию. По-любому тут есть несколько небольших ошибок, которые я, в виду своей неопытности, не заметил.

Добавлено через 19 минут
tree = document.getElementById("select-tree"),
price = document.getElementById("calculated-price"),
type = document.getElementById("select-type"),
currency = document.getElementById("calc-currency");

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

@fixeri · 17.01.2020, 18:49

JavaScript
1
2
tree.oninput=evaluate();
type.oninput=evaluate();

используйте событие onchange, и не вызывайте функцию сразу.

JavaScript
1
2
tree.onchange = evaluate;
type.onchange = evaluate;

@qwerty100 · 18.01.2020, 00:35 **[ТС]**

Сработало. Так и знал, что дело в паре нюансов. Спасибо большое!!!!!

@qwerty100 · 19.01.2020, 14:51 **[ТС]**

Чуть включил мозги и реализовал всё таким вот образом. Выглядит получше, мне кажется_)

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Тест</title>
</head>
<body>
<select name="select-tree" id="select_tree">
    <option value="Акация">Акация</option>
    <option value="Твёрдые породы">Твёрдые породы</option>
    <option value="Фруктовые">Фруктовые</option>
</select>
<select name="select-type" id="select_type">
    <option value="Метровые">Метровые</option>
    <option value="Чурки">Чурки</option>
    <option value="Колотые">Колотые</option>
    <option value="В сетке">В сетке</option>
</select>
<div id="meter_price"></div>
<input aria-invalid="false" aria-required="true" id="square" max="30" min="1" name="your-range" step="1" type="range"
       value="1">
<div id="count-meter"></div>
<div id="result-price"></div>
<script>
    let type=document.getElementById("select_type"),
        tree=document.getElementById("select_tree"),
        count=document.getElementById("square"),
        outputMeter = document.getElementById("count-meter"),
        outputPrice = document.getElementById("result-price"),
        tempPrice = document.getElementById("meter_price"),
        arrayPrices = [[750,800,850, "Нет в наличии"],[650,700,780, "Нет в наличии"],[750,800,850, "Нет в наличии"]]
        var currency="<span> грн/м<sup><small>3</small></sup></span>";
        tempPrice.innerHTML = arrayPrices[tree.selectedIndex] [type.selectedIndex]+currency;
 
 
        outputMeter.innerHTML=count.value;
        outputPrice.innerHTML=(arrayPrices[tree.selectedIndex] [type.selectedIndex]*count.value).toString() + currency;
        type.onchange=changeSelector;
        tree.onchange=changeSelector;
        count.oninput=resFunction;
        function slideRange() {
            getCurrency();
            outputMeter.innerHTML=count.value;
        }
        function changeSelector() {
            getCurrency();
            outputPrice.innerHTML= (arrayPrices[tree.selectedIndex] [type.selectedIndex] * count.value).toString() + currency;
            tempPrice.innerHTML = (arrayPrices[tree.selectedIndex] [type.selectedIndex]).toString() + currency;
        }
        function resFunction() {
            slideRange();
            changeSelector();
        }
        function getCurrency() {
            if(arrayPrices[tree.selectedIndex][type.selectedIndex]=="Нет в наличии")
            {
                currency="";
            }
            else {
                currency="<span> грн/м<sup><small>3</small></sup></span>";
            }
        }
</script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@qwerty100 6 / 6 / 3 Регистрация: 14.10.2014 Сообщений: 85
	18.01.2020, 00:35 [ТС]
	Сработало. Так и знал, что дело в паре нюансов. Спасибо большое!!!!! 0

Калькулятор цены с Contact Form WP

Решение