Тип данных в JS

141

07 марта 2022, 20:20

Есть часть сайта для регистрации (человек в форме заполняет данные о количестве людей и часов):

<form action="" class="form">
                    <section class="selectPeople">
                        <input type="range" min="2" max="20" step="1"  name="people" id="peopleRange">
                        <p >Количество человек</p> <span id="peopleCol"></span>
                    </section>
                    <section class="selectTime">
                        <input type="range" min="15" max="60" step="15"  name="time" id="timeRange">
                        <p >Время игры</p> <span id="timeCol"></span>
                    </section>
                    <section class="price">
                        <p>Стоимость игры</p>
                        <span id="price"></span>
                    </section>
                </form>

var peopleCol = document.querySelector('#peopleCol');
    var peopleRange = document.querySelector('#peopleRange');
    peopleCol.innerHTML = peopleRange.value;
    peopleRange.oninput = function(){
        peopleCol.innerHTML = peopleRange.value;
    }
    var timeRange = document.querySelector('#timeRange');
    var timeCol = document.querySelector('#timeCol');
    timeCol.innerHTML = timeRange.value;
    timeRange.oninput = function(){
        timeCol.innerHTML = timeRange.value;
    }

Далее необходимо посчитать цену заказа. Решил это реализовать следующим кодом:

var price = document.querySelector('#price');
    price.innerHTML = 60 * Number(peopleCol.value) * (Number(timeCol.value)/15);

Но в резудьтате выдает NAN. Я так понимаю что я где то напутал с типом данных в нужной мне формуле. Подскажите, где б надо поправить

Answer 1

Для наглядности пример:

var peopleCol = document.querySelector('#peopleCol'); 
var peopleRange = document.querySelector('#peopleRange'); 
peopleCol.innerHTML = peopleRange.value; 
peopleRange.oninput = function() { 
  peopleCol.innerHTML = peopleRange.value; 
}; 
var timeRange = document.querySelector('#timeRange'); 
var timeCol = document.querySelector('#timeCol'); 
timeCol.innerHTML = timeRange.value; 
timeRange.oninput = function() { 
  timeCol.innerHTML = timeRange.value; 
}; 
 
peopleRange.onchange = function() { 
  var price = document.querySelector('#price'); 
  price.innerHTML = 60 * Number(peopleCol.innerHTML) * (Number(timeCol.innerHTML) / 15); 
}; 
timeRange.onchange = function() { 
  var price = document.querySelector('#price'); 
  price.innerHTML = 60 * Number(peopleCol.innerHTML) * (Number(timeCol.innerHTML) / 15); 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form action="" class="form"> 
  <section class="selectPeople"> 
    <input type="range" min="2" max="20" step="1" name="people" id="peopleRange"> 
    <p>Количество человек</p> <span id="peopleCol"></span> 
  </section> 
  <section class="selectTime"> 
    <input type="range" min="15" max="60" step="15" name="time" id="timeRange"> 
    <p>Время игры</p> <span id="timeCol"></span> 
  </section> 
  <section class="price"> 
    <p>Стоимость игры</p> 
    <span id="price"></span> 
  </section> 
</form>

Answer 2

let peopleCol = document.querySelector('#peopleCol'); 
let peopleRange = document.querySelector('#peopleRange'); 
let timeRange = document.querySelector('#timeRange'); 
let timeCol = document.querySelector('#timeCol'); 
let price = document.querySelector('#price'); 
 
//выставляем значения при инициалиации 
peopleCol.textContent = peopleRange.value; 
timeCol.textContent = timeRange.value; 
price.textContent = 60 * peopleRange.value * (timeRange.value / 15) 
 
//Событие при изменении кол-ва людей 
peopleRange.addEventListener("change", function() { 
  peopleCol.textContent = this.value; 
  price.textContent = 60 * this.value * (timeRange.value / 15) 
}) 
 
//Событие изменении значений времени 
timeRange.addEventListener("change", function() { 
  timeCol.textContent = this.value; 
  price.textContent = 60 * peopleRange.value * (this.value / 15) 
})

<form action="" class="form"> 
  <section class="selectPeople"> 
    <input type="range" min="2" max="20" step="1" name="people" id="peopleRange"> 
    <p>Количество человек</p> <span id="peopleCol"></span> 
  </section> 
  <section class="selectTime"> 
    <input type="range" min="15" max="60" step="15" name="time" id="timeRange"> 
    <p>Время игры</p> <span id="timeCol"></span> 
  </section> 
  <section class="price"> 
    <p>Стоимость игры</p> 
    <span id="price"></span> 
  </section> 
</form>