Как повесить условия на value?

Question

Как повесить условия на value?

Рейтинг: 0Ответов: 1Опубликовано: 06.08.2023

Подскажите как повесить обработчики на value и если значение выполняется добавить класс? Я сделал, но не понимаю почему не работает. Спасибо

const inputNumberStudents = document.querySelector('#number'); //количество школьников
const inputNumberAttendants = document.querySelector('#number-2'); //дополнительные сопровождающие
const numberStudentsPrice = parseInt(document.querySelector('.it-price-students-small').innerHTML); //цена за 1 школьника < 17
const numberStudentsPrice_2 = document.querySelector('.it-price-students-medium'); //цена за 1 школьника > 17 < 28
const numberStudentsPrice_3 = document.querySelector('.it-price-students-big'); //цена за 1 школьника > 17 < 28

const numberAttendantsPrice = parseInt(document.querySelector('.it-price-attendants-small').innerHTML); //цена за 1 сопровождающих < 2
const numberAttendantsPrice_2 = parseInt(document.querySelector('.it-price-attendants-medium').innerHTML); //цена за 1 сопровождающих < 2
const numberAttendantsPrice_3 = parseInt(document.querySelector('.it-price-attendants-big').innerHTML); //цена за 1 сопровождающих < 4

        if (inputNumberStudents.value <= 17 && inputNumberAttendants.value <= 2) {
            numberStudentsPrice.classList.add("_active")
            numberAttendantsPrice.classList.add("_active")
        } else if (inputNumberStudents >= 17 && numberStudentsPrice_2 <= 28 && inputNumberAttendants.value <= 2) {
            numberStudentsPrice_2.classList.add("_active")
            numberAttendantsPrice_2.classList.add("_active")
        } else if (inputNumberStudents >= 30 && numberStudentsPrice_2 <= 50 && inputNumberAttendants.value <= 4) {
            numberStudentsPrice_3.classList.add("_active")
            numberAttendantsPrice_3.classList.add("_active")
        }

.it-price-students-small._active{
  display:block;
}
.it-price-students-medium._active{
  display:block;
}
.it-price-students-big._active{
   display:block;
}
.it-price-students-medium{
  display:none;
}
.it-price-students-big{
   display:none;
}

.it-price-attendants-small._active{
  display:block;
}
.it-price-attendants-medium._active{
  display:block;
}
.it-price-attendants-big._active{
   display:block;
}
.it-price-attendants-medium{
  display:none;
}
.it-price-attendants-big{
   display:none;
}

<input data-required id="number" autocomplete="off" type="text" name="form[]" value="1" placeholder="1" class="input input-calc">

<span class="it-price-students-small _active">1000</span><!-- < 17-->
<span class="it-price-students-medium">2000</span><!-- > 19 < 28 -->
<span class="it-price-students-big">3000</span><!-- > 30 < 50-->
<br>
<br>
<input data-required id="number-2" autocomplete="off" type="text" value="3" name="form[]" placeholder="3" class="input input-calc">
<div class="form-popup__input-number">
  <span class="it-price-attendants-small _active">1000</span>
  <span class="it-price-attendants-medium">2000</span>
  <span class="it-price-attendants-big">3000</span>

</div>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Добавьте обработчик события, который реагирует на изменение в input:

const inputNumberStudents = document.querySelector('#number'); //количество школьников
const inputNumberAttendants = document.querySelector('#number-2'); //дополнительные сопровождающие

const formPopupInputNumber = document.querySelector('.form-popup__input-number');
const formPopupInputNumber2 = document.querySelector('.form-popup__input-number-2');

const numberStudentsPrice = formPopupInputNumber.querySelector('.it-price-small'); //цена за 1 школьника < 17
const numberStudentsPrice2 = formPopupInputNumber.querySelector('.it-price-medium'); //цена за 1 школьника > 17 < 28
const numberStudentsPrice3 = formPopupInputNumber.querySelector('.it-price-big'); //цена за 1 школьника > 17 < 28

const numberAttendantsPrice = formPopupInputNumber2.querySelector('.it-price-small'); //цена за 1 сопровождающих < 2
const numberAttendantsPrice2 = formPopupInputNumber2.querySelector('.it-price-medium'); //цена за 1 сопровождающих < 2
const numberAttendantsPrice3 = formPopupInputNumber2.querySelector('.it-price-big'); //цена за 1 сопровождающих < 4

const container = document.querySelector('.container');

container.addEventListener('change', function() {

  const numberStudents = inputNumberStudents.value;
  const numberAttendants = inputNumberAttendants.value;

  if (numberStudents !== '' && numberAttendants !== '') {

    const allActive = document.querySelectorAll('._active');
    for (let i = 0; i < allActive.length; i++) { //Удаляем у всех найденных элементов класс _active
      allActive[i].classList.remove('_active');
    }
  
    if (numberStudents <= 17 && numberAttendants <= 2) {
        numberStudentsPrice.classList.add("_active")
        numberAttendantsPrice.classList.add("_active")
    } else if (numberStudents >= 17 && numberStudents <= 28 && numberAttendants <= 2) {
        numberStudentsPrice2.classList.add("_active")
        numberAttendantsPrice2.classList.add("_active")
    } else if (numberStudents >= 30 && numberStudents <= 50 && numberAttendants <= 4) {
        numberStudentsPrice3.classList.add("_active")
        numberAttendantsPrice3.classList.add("_active")
    }
  }
})

.it-price-small {
  display: none;
}

.it-price-medium {
  display: none;
}

.it-price-big {
  display: none;
}

._active{
  display: block;
}

<div class="container">
  <div class="form-popup__input-number">
    <input data-required id="number" autocomplete="off" type="text" name="form[]" value="1" placeholder="Школьники" class="input input-calc">
    <span class="it-price-students-small _active">1000</span><!-- < 17-->
    <span class="it-price-students-medium">2000</span><!-- > 19 < 28 -->
    <span class="it-price-students-big">3000</span><!-- > 30 < 50-->
  </div>

  <br>
  <br>

  <div class="form-popup__input-number-2">
    <input data-required id="number-2" autocomplete="off" type="text" value="2" name="form[]" placeholder="Сопровождающие" class="input input-calc">
    <span class="it-price-attendants-small _active">1000</span>
    <span class="it-price-attendants-medium">2000</span>
    <span class="it-price-attendants-big">3000</span>
  </div>
</div>

Как повесить условия на value?

Ответы