Как я могу избежать ошибки NaN в простой форме?

Question

У меня есть простая форма, которая должна возвращать квадрат root числа. Но я получаю NaN ошибку. Как видите, переменная «число» имеет тип числа. Что я делаю не так?

let number = parseInt(document.getElementById('value'));

function myFunction() {
    alert(Math.sqrt(number));
  }

<div class="container">
        
        <form>
            <fieldset>
              <legend>Number squared</legend>
              <p><label >Insert number here: </label><input type="number" id="value"></p>
            </fieldset>
          <p><input type="button" id="button" onclick="myFunction()" value="calculate"></p>
          </form>
    </div>

Answer 1

function myFunction() {
  const number = +document.getElementById('value').value;

  if (isNaN(number)) {
    alert('Please pass in a number') 
    return
  }

  alert(Math.sqrt(number))
}

Answer 2

Сначала document.getElementById() возвращает элемент HTML. Вы должны получить доступ к свойству value, выполнив document.getElementById().value. Во-вторых, переменная number всегда будет равна NaN, поскольку эта строка кода выполняется первой и никогда не изменяется.

let value = document.getElementById('value').value // Evaluates to ""
let number = parseInt(value); // Evaluates to NaN

// The number variable is never re-evaluated when the function is invoked
function() {
  alert(Math.sqrt(number));
}

Вам необходимо переместить эту строку кода в вашу функцию, чтобы при вызове функции определялось значение number, а не в начале выполнения кода.

function myFunction() {
  const number = parseInt(document.getElementById('value').value)
  
  if (isNaN(number)) {
    alert('Please pass in a number') 
    return
  }
  
  alert(Math.sqrt(number))
}

<div class="container">
  <form>
    <fieldset>
      <legend>Number squared</legend>
      <p><label>Insert number here: </label><input type="number" id="value"></p>
    </fieldset>
    <p><input type="button" id="button" onclick="myFunction()" value="calculate"></p>
  </form>
</div>

Answer 3

Это потому, что document.getElementById() возвращает сам элемент, а не значение. Вам нужно получить значение для ввода, чтобы проанализировать его как целое число.

Измените код на parseInt(document.getElementById('value').value);