<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;
  -moz-appearance: textfield;
  background:white;
  color:black;
  border:none;
}
.raz::-webkit-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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js