JSFiddle - React, Tailwind, and code Playground
by Boris Shpakovsky
HTML
<h3>Количество</h3>
<input id="quant" type="text">
<h3>Материал</h3>
<select name="list-two" id="list2">
<option value="1500">Текстиль</option>
<option value="2500">Кожзаментиель</option>
<option value="3500">Натуральная кожа</option>
</select>
<h3>Фурнитура</h3>
<select name="list-three" id="list3">
<option value="300">Пластик</option>
<option value="500">Латунь</option>
<option value="700">Бронза</option>
</select>
<button onclick="myFu()">Рассчитать</button>
<div>Цена без скидки:
<span id="res-full">0</span> руб.
</div>
<div>Ваша цена:
<span id="res">0</span> руб.
</div>
<div>Экономия:
<span id="eco">0</span> руб. (Скидка:<span id="eco-per">0%)</span>
</div>
<script>
function myFu() {
var perc = document.getElementById("eco-per").innerHTML;
var q = document.getElementById("quant").value;
var matlist = document.getElementById("list2");
var mat = matlist.options[matlist.selectedIndex].value;
var furnlist = document.getElementById("list3");
var furn = furnlist.options[furnlist.selectedIndex].value;
var result = ( Number(mat) + Number(furn) ) * Number( q );
document.getElementById("res-full").innerHTML = result;
if (q <= 100) {
document.getElementById("res").innerHTML = result;
document.getElementById("eco").innerHTML = 0;
document.getElementById("eco-per").innerHTML = '0%)';
}
else if ( q >= 100 && q < 200 ) {
var result2 = document.getElementById("res").innerHTML = Number( result ) - Number( result / 100 * 10 );
document.getElementById("eco").innerHTML = Number( result ) * 10 / 100;
document.getElementById("eco-per").innerHTML = '10%)';
}
else if ( q >= 200 && q < 300 ) {
var result2 = document.getElementById("res").innerHTML = Number( result ) - Number( result / 100 * 15 );
document.getElementById("eco").innerHTML = Number( result ) * 15 / 100;
document.getElementById("eco-per").innerHTML = '15%)';
}
else if ( q >= 300 ) {
var result2 = document.getElementById("res").innerHTML = Number( result ) - Number( result / 100 * 20...