Функция не работает вызовом onkeyup, при печатывании калькулятор должна начать расчитывать, помогите

Question

let gender = document.querySelectorAll("#gender .calculating__choose-item")
    let height = document.querySelector("#height")
    let weight = document.querySelector("#weight")
    let age = document.querySelector("#age")
    let phisAct = document.querySelectorAll(".calculating__choose_big .calculating__choose-item")
    let result = document.querySelector(".calculating__result span")
    let inputs = document.querySelectorAll(".calculating__choose_medium .calculating__choose-item")
    inputs.onkeyup = () => calsPerDay()
    
      for (let i of gender) {
        i.onclick = () => {
            for (let j of gender) {
                j.classList.remove("calculating__choose-item_active")
                i.classList.add("calculating__choose-item_active")
            }
        }
    }
    
    function calsPerDay() {
        if (gender[0].classList.contains("calculating__choose-item_active")) {
            result = 66.47 + (13.75 * weight.value / 2.2) + (5.0 * height.value * 2.54 - (6.75 * age))
        } else if (gender[1].classList.contains("calculating__choose-item_active")) {
            result = 665.09 + (9.56 * weight) + (1.84 * height.value * 2.54 - (4.67 * age))
        }
        result.innerHTML = result
    }

.calculating__choose {
    position: relative;
    display: flex;
    margin-top: 30px;
    justify-content: center
}

.calculating__choose-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 50px;
    padding: 0 10px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    border: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    outline: 0;
    transition: .3s all
}

.calculating__choose-item_active {
    color: #fff;
    background-color: #54ed39
}

.calculating__choose_medium {
    width: 743px;
    justify-content: space-between;
    margin: 30px auto 0 auto
}

.calculating__total {
    width: 490px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.calculating__result {
    font-size: 18px;
    font-weight: 700
}

.calculating__result span {
    font-size: 42px
}

<div class="calculating__choose" id="gender">
                    <div class="calculating__choose-item calculating__choose-item_active">Женщина</div>
                    <div class="calculating__choose-item">Мужчина</div>
                </div>
<div class="calculating__choose calculating__choose_medium">
                    <input type="number" id="height" placeholder="Введите рост" name="height"
                        class="calculating__choose-item">
                    <input type="number" id="weight" placeholder="Введите вес" name="weight"
                        class="calculating__choose-item">
                    <input type="number" id="age" placeholder="Введите возраст" name="age"
                        class="calculating__choose-item">
                </div>
                <div class="calculating__total">
                    <div class="calculating__subtitle">
                        Ваша суточная норма калорий:
                    </div>
                    <div class="calculating__result">
                        <span>0</span> ккал
                    </div>
                </div>

Answer 1

querySelectorAll() возвращает NodeList, подробнее почитайте здесь: https://developer.mozilla.org/ru/docs/Web/API/Document/querySelectorAll

Чтобы повесить событие изменения значений на каждый input из вашего NodeList, используйте метод forEach и событие oninput:

inputs.forEach((element) => {
  element.oninput = () => calsPerDay()
})

Вы сначала назначили переменной result значение document.querySelector(".calculating__result span"), а потом в функции calsPerDay() переназначаете эту переменную для хранения в ней результата, в этом ошибка тоже, используйте разные имена переменных. Например в самой функции можно создать новую переменную для хранения результата, а потом присваивать её значение нашему элементу result.

Для получения значений input нужно использовать свойство value, Вы в функции в некоторых местах обращаетесь напрямую к элементу, а не к его значению.

Вот исправленный код:

let gender = document.querySelectorAll("#gender .calculating__choose-item")
let height = document.querySelector("#height")
let weight = document.querySelector("#weight")
let age = document.querySelector("#age")
let phisAct = document.querySelectorAll(".calculating__choose_big .calculating__choose-item")
let result = document.querySelector(".calculating__result span")
let inputs = document.querySelectorAll(".calculating__choose_medium .calculating__choose-item")

inputs.forEach((element) => {
  element.oninput = () => calsPerDay()
})

for (let i of gender) {
  i.onclick = () => {
    for (let j of gender) {
      j.classList.remove("calculating__choose-item_active")
      i.classList.add("calculating__choose-item_active")
    }
  }
}

function calsPerDay() {
  let resultValue;
  if (gender[0].classList.contains("calculating__choose-item_active")) {
    resultValue = 66.47 + (13.75 * weight.value / 2.2) + (5.0 * height.value * 2.54 - (6.75 * age.value))
  } else if (gender[1].classList.contains("calculating__choose-item_active")) {
    resultValue = 665.09 + (9.56 * weight.value) + (1.84 * height.value * 2.54 - (4.67 * age.value))
  }

  console.log(resultValue);
  result.innerHTML = Math.round(resultValue);
}

.calculating__choose {
  position: relative;
  display: flex;
  margin-top: 30px;
  justify-content: center
}

.calculating__choose-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 50px;
  padding: 0 10px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
  border: none;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  outline: 0;
  transition: .3s all
}

.calculating__choose-item_active {
  color: #fff;
  background-color: #54ed39
}

.calculating__choose_medium {
  width: 743px;
  justify-content: space-between;
  margin: 30px auto 0 auto
}

<div class="calculating__choose" id="gender">
  <div class="calculating__choose-item calculating__choose-item_active">Женщина</div>
  <div class="calculating__choose-item">Мужчина</div>
</div>
<div class="calculating__choose calculating__choose_medium">
  <input type="number" id="height" placeholder="Введите рост" name="height" class="calculating__choose-item">
  <input type="number" id="weight" placeholder="Введите вес" name="weight" class="calculating__choose-item">
  <input type="number" id="age" placeholder="Введите возраст" name="age" class="calculating__choose-item">
</div>
<div class="calculating__total">
  <div class="calculating__subtitle">
    Ваша суточная норма калорий:
  </div>
  <div class="calculating__result">
    <span>0</span> ккал
  </div>
</div>

БЛОГ НА HUSL

Функция не работает вызовом onkeyup, при печатывании калькулятор должна начать расчитывать, помогите

Ответы (1 шт):