<div id="price">
<h3>Выберите газон</h3>
<input type="radio" class="box" name="box" value="130"><label for="box1">Универсальный
премиум</label><br />
<input type="radio" class="box" name="box" value="130"><label for="box2">Теневыносливый
премиум</label><br />
<input type="radio" class="box" name="box" value="150"><label for="box3">Делюкс
партерный</label><br />
<h3>Нужно ли подготовить участок?</h3>
<input type="radio" class="box5" name="box5" value="280"><label for="box6">Подготовить</label><br />
<input type="radio" class="box5" name="box5" value="0"><label for="box5">Нет</label><br />
<h3>Сколько м² Ваш участок?</h3>
<input type="number" name="metr" class="raz" id="chislo">
<br /><br />
<button class="calc-btn">Рассчитать!</button> <br/> <br /> <!-- задаем выполнение функции Start при клике на кнопку -->
</div>
</div>
<div class="resultat">
<div class="resultat-summa" id="result"></div> <!-- контейнер для вывода результатов -->
<div id="sale"></div>
</div>
body{
font-family:Helvetica,Arial,sans-serif;
background:#fff;
color:#26912A;
letter-spacing:2px;
}
#price{
width:300px;
height:450px;
margin:0 auto;
padding:30px;
border:solid 1px #26912A;
background:#114012;
color:#fff;
line-height:24px;
}
.calc-btn{
width:300px;
height:40px;
background:#26912A;
border:none;
color:#fff;
text-transform:uppercase;
}
.resultat{
width:300px;
height:80px;
margin:50px auto 0;
}
.resultat-summa{
font-size:25px;
font-weight:bold;
line-height:24px;
}
#sale{
margin-top:10px;
}
.raz {
width:280px;
padding:10px;
font-size:16px;
font-weight:bold;
text-align:center;
appearance: textfield;
background:white;
color:black;
border:none;
}
.raz::inner-spin-button {
display: none;
}
function Start(){
var radio = 0, radioq = 0;
var chislo = Number(document.querySelector('#chislo').value);
var sale = document.querySelector('#sale');
if (chislo >= 1000 && chislo <= 2000){
sale.innerHTML = 'Ваша скидка: 5%';
} else if (chislo >= 2001){
sale.innerHTML = 'Ваша скидка: 10%';
} else {
sale.innerHTML = '';
}
var setValue1 = document.querySelectorAll('.box');
radio = getValue(setValue1);
var setValue2 = document.querySelectorAll('.box5');
radioq = getValue(setValue2);
function getValue(n) {
var res = 0;
for (var i = 0; i < n.length; i++) {
if (n[i].checked == true) {
res = +n[i].value;
}
}
return res;
}
if (chislo > 2000) {
chislo = 0.9 * chislo;
} else if (chislo >= 1000 && chislo <= 2000) {
chislo = 0.95 * chislo;
}
chislo = +chislo.toFixed(2);
var result = (radio + radioq) * chislo;
document.getElementById('result').innerHTML = 'Результат: ' + result;
}
document.querySelector('.calc-btn').addEventListener('click', Start);
This Pen doesn't use any external CSS resources.