kantry, так вроде я уже всё нарисовал
dilp, В вопросе речь шла о компактности кода. Погляди на свою портянку))
Добавлено: 12.12.2019 / 17:59
код (+/-)
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Тип дисков</h1>
<p>
<select name="diskType" id="diskType" onchange="change()">
<option value="1">KVM HDD (199руб)</option>
<option value="2">KVM SSD (269руб)</option>
<option value="3">KVM NVMe (329руб)</option>
</select>
</p>
<h1>Дополнительные ресурсы</h1>
<div id="hdd">
<p>
<label for="cpuHDD">CPU HDD</label>
<select name="cpuHDD" id="cpuHDD" onchange="change()">
<option value="0">Не выбрано</option>
<option value="1">1 CPU (60руб)</option>
<option value="2">2 CPU (120руб)</option>
<option value="3">3 CPU (180руб)</option>
<option value="4">4 CPU (240руб)</option>
<option value="5">5 CPU (300руб)</option>
<option value="6">6 CPU (360руб)</option>
<option value="7">7 CPU (420руб)</option>
<option value="8">8 CPU (480руб)</option>
</select>
</p>
<p>
<label for="ramHDD">RAM HDD</label>
<select name="ramHDD" id="ramHDD" onchange="change()">
<option value="0">Не выбрано</option>
<option value="1">1 RAM (80руб)</option>
<option value="2">2 RAM (160руб)</option>
<option value="3">3 RAM (240руб)</option>
<option value="4">4 RAM (320руб)</option>
<option value="5">5 RAM (400руб)</option>
<option value="6">6 RAM (480руб)</option>
</select>
</p>
<p>
<label for="diskSpace">Место на диске <span id="disk">0</span>гб</label>
<input id="diskSpace" type="range" min="0" max="500" step="10" value="0" onchange="change()">
</p>
</div>
<p>
Общая стоимость: <span id="sum">199 руб</span>
</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
const sum = document.getElementById("sum");
const disk = document.getElementById("disk");
const cpuHDDEl = document.getElementById("cpuHDD");
const ramHDDEl = document.getElementById("ramHDD");
const diskTypeEl = document.getElementById("diskType");
const diskSpaceEl = document.getElementById("diskSpace");
const diskTypes = { "1": 199, "2": 269, "3": 329 };
const cpuHDDs = [0, 60, 120, 180, 240, 300, 360, 420, 480];
const ramHDDs = [0, 80, 160, 240, 320, 400, 480];
const entries = Array.from({ length: 50 }, (el, idx) => [0 + (idx * 10), (idx + 1) * 20]);
const diskSpaces = Object.fromEntries(entries);
function change() {
const diskType = diskTypes[diskTypeEl.value];
const cpuHDD = cpuHDDs[cpuHDDEl.value];
const ramHDD = ramHDDs[ramHDDEl.value];
const diskSpace = diskSpaces[diskSpaceEl.value];
sum.innerHTML = diskType + cpuHDD + ramHDD + (diskSpace - 20);
disk.innerHTML = diskSpaceEl.value;
}
</script>
</body>
</html>
Добавлено: 12.12.2019 / 18:00
Только так надо для каждого тарифа сделать. Если выбран hdd то выбор железа для него, если выбрать ssd то для ssd и так далее.
PaRtiZzaN, Ты на кой хрен там констант понавтыкал? Хотя бы узнай что это такое))
kantry, Мне это писал человек который 5 лет профи кодер на js
# kantry (12.12.2019 / 18:04)
PaRtiZzaN, Ты на кой хрен там констант понавтыкал? Хотя бы узнай что это такое))
в js это малость не то, что в php
В том случае в принципе уместно использовать их)
# Simba (13.12.2019 / 10:19)
в js это малость не то, что в php В том случае в принципе уместно использовать их)
Я достаточно знаю явскрипт, что бы даже не запуская код, увидеть unexpected token keyword const
# kantry (13.12.2019 / 12:18)
Я достаточно знаю явскрипт, что бы даже не запуская код, увидеть unexpected token keyword const
браузер всё же так не считает гг
Simba, Ога, я залез сейчас в ES10, но только браузер то не у всех хром
В остальных этот код не будет работать