Как проверить и вернуть сообщение, если значение не введено

Question

Я все еще учусь и пытаюсь просто взять число из ввода, добавить 7 к нему, а затем отобразить его на веб-странице. Все работает нормально, но мне не нравится, если вы нажимаете «отправить», не вводя число, в поле HTML отображается «NaN» против настраиваемого сообщения, что я и хотел бы сделать.

Вот код, который у меня есть. Чего мне не хватает, чтобы поймать, что ничего не было введено и вернуть другое сообщение?

function add7() {
  let number = document.getElementById('num').value;
  let addition = 7;
  if (isNaN(number)){
    document.getElementById("add").innerHTML ="Please enter a value";
  }
  else { 
    let original = parseInt(number,10);
    num = addition + original;
    document.getElementById("add").innerHTML = num;
  }
}

 

<div class="add">
  Add 7 to the number <br>
  <input type="number" id="num">
  <button onclick="add7()">Press Button</button>
  <hr>
  <p id="add"></p>
</div>

Answer 1

Это потому, что пустая строка на самом деле возвращает true при передаче в isNaN(), т.е. isNaN('') возвращает true.

. Для этого вы можете просто переместить чек до последнего шага, то есть вместо оценки num переменная:

function add7() {
  let number = document.getElementById('num').value;
  let addition = 7;
  let original = parseInt(number, 10);
  let num = addition + original;
  
  if (isNaN(num)) {
    document.getElementById("add").innerHTML = "Please enter a value";
    return;
  }

  document.getElementById("add").innerHTML = num;

}

<div class="add">
  Add 7 to the number <br>
  <input type="number" id="num">
  <button onclick="add7()">Press Button</button>
  <hr>
  <p id="add">
  </p>
</div>

В качестве альтернативы, вы также можете просто проанализировать значение элемента ввода напрямую: оно сообщит вам, если это не число сразу:

function add7() {
  let number = parseInt(document.getElementById('num').value, 10);
  if (isNaN(number)) {
    document.getElementById("add").innerHTML = "Please enter a value";
    return;
  }
  
  let addition = 7;
  let num = addition + number;
  document.getElementById("add").innerHTML = num;

}

<div class="add">
  Add 7 to the number <br>
  <input type="number" id="num">
  <button onclick="add7()">Press Button</button>
  <hr>
  <p id="add">
  </p>
</div>