javascript - 按键验证后如何在 HTML 页面中显示结果？

Question

我创建了一个小型转换器(我是个新手)，我正在尝试使结果显示在网页上。

我尝试在 Udemy 类(class)中浏览一些 YouTube 视频，但似乎无法实现。

let convertToInch = function (number){
  if (Number.isInteger(number)){
    return convertedNumber = Math.round(number*0.393700787)
  } else {
    console.log('Not a number')
  }
}

document.querySelector('#conversion').addEventListener('submit', function(e){
  e.preventDefault();
  convertedNumber = convertToInch(e.target.elements.text.value);
  console.log(convertedNumber);
})

<form id="conversion">
  <input type="input" placeholder="Enter Cm" name="text">
  <button>Convert</button>
</form>

我也很想按数字进行转换，我尝试过按键，但收到以下错误:

“app.js:3未捕获的类型错误:无法读取未定义的属性“文本” 在 HTMLFormElement 处。 (app.js:3)"

我还尝试使用 Number.isInteger 和 If 语句来验证数字(因此仅处理整数) - 但我不断收到“else”console.log 和“undefined”。

Answer 1

在使用Number.isInteger之前，需要先将字符串转换为数字。

Number.isInteger如果给定参数不是数字类型，则始终返回 false。

从 DOM 检索的值始终是字符串类型。

您可以使用 parseInt 将字符串转换为整数.

let convertToInch = function (number){
  if (Number.isInteger(parseInt(number))){
    return convertedNumber = Math.round(number*0.393700787)
  } else {
    console.log('Not a number')
  }
}

document.querySelector('#conversion').addEventListener('submit', function(e){
  e.preventDefault();
  convertedNumber = convertToInch(e.target.elements.text.value);
  console.log(convertedNumber);
})

<form id="conversion">
  <input type="input" placeholder="Enter Cm" name="text">
  <button>Convert</button>
</form>