Проверка данных из формы работает некорректно JS

Question

Есть код:

const button = document.querySelector('.final');
const paragraph = document.querySelector('.answer');
const kk = document.querySelector('.k').value;
const nn = document.querySelector('.n').value;

const summ = () => {
  const kk = document.querySelector('.k').value;
  const nn = document.querySelector('.n').value;
  const multiplication = k * n;
  return multiplication;
}

button.addEventListener('click', () => {
  if (typeof(kk) !== 'number' || typeof(nn) !== 'number' || kk < 0 || nn < 0) {
    paragraph.innerHTML = 'Enter valid numbers';
  } else {
    paragraph.innerHTML = summ();
  }
});

<input type="text" class="k">
<input type="text" class="n">
<input type="submit" class="final">
<p class="answer">

Результат он вписывает, но игнорирует мою проверку if-else на тип данных и ввод > 0.

В чем я ошибся?

Answer 1

Вы были очень близко, я чуть доработал Вашу логику:

const button = document.querySelector(".final")
const paragraph = document.querySelector(".answer")
const k = document.querySelector(".k")
const n = document.querySelector(".n")

const summ = (kk, nn) => {
  return kk * nn
}

const handleClick = () => {
  const kk = Number(k.value.trim())
  const nn = Number(n.value.trim())
  if (isNaN(kk) || kk < 0 || isNaN(nn) || nn < 0) {
  // или
  // if (isNaN(kk) || isNaN(nn)) {}
  // если проверка на отрицательные цисла не требуется
    paragraph.innerHTML = "Enter valid numbers"
  } else {    
    paragraph.innerHTML = summ(kk, nn)
  }
}

button.addEventListener("click", handleClick)

<input type="text" class="k" />
<input type="text" class="n" />
<input type="submit" class="final" />
<p class="answer"></p>

Отдельно стоит отметить что если данные input'ы должны принимать только числа, то стоит задать им тип "number", что позволит избежать дополнительных проверок на тип впоследствии:

<input type="number" />

Answer 2

const kk = document.querySelector('.k').value;
const nn = document.querySelector('.n').value;

Эти значения получаете один раз, во время запуска скрипта (когда input-ы еще пустые, оба будут "") - каждый раз они и идут на проверку. Оба являются строками (даже если в HTML изначально будут числовые значения), поэтому и проходят сравнение !== "number" (строка - не число).

А почему функция умножает, а называется "sum" ?

const button = document.querySelector('.button');
const answer = document.querySelector('.answer');
const k = document.querySelector('.k');
const n = document.querySelector('.n');

button.addEventListener('click', function() {
  answer.textContent = validate_n_mul(k.value, n.value);
  
  /***/                 
  function validate_n_mul(str_1, str_2) {
    if (
      !str_1 || !str_2 ||     // пустая строка
      isNaN(str_1 + str_2) || // где-то ввели не число
      str_1 < 0 || str_2 < 0  // меньше нуля
    ) return 'Enter valid numbers';

    return str_1 * str_2;
  }
});

<input type="text" class="k">
<input type="text" class="n">
<input type="submit" class="button">
<p class="answer">

str_1 < 0 — при сравнении строки с числом, строка тоже неявно будет преобразована в числовой тип. Но если оба - строки, "11" < "9" выдаст true. С этим нужно быть осторожным (заранее превращать их в число).

БЛОГ НА HUSL

Проверка данных из формы работает некорректно JS

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