javascript - 如何将输入限制为数字 0-9?

标签 javascript input numbers

我需要编写一个代码,使其只能将数字 1 - 9 输入到文本字段中。

无论在文本字段中输入什么数字,都将输出该数字的 1-9 时间表。

例如,如果输入数字“1”:将列出 1 x 1 = 1 到 1 x 9 = 9。

我不知道如何将输入数字限制为 1、2、3、4、5、6、7、8 和 9。这是我目前的代码:

<html>
<head>
<script>
function table(){
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);

  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for(let i = 1; i <= 9; i++) {
      //Append the current times table to the HTML
      displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
}
</script>
</head>
<body>
Enter an integer from 1 to 9:
  <input id="integer" type="text">
  <button onclick="table()" onclick="table2()">Generate times table</button>
  <p id="display"></p>


</body>
</html>

最佳答案

只需确保您的 integer 变量是 1 到 9 之间的整数:

function table() {
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);
  if (!Number.isInteger(integer) || integer < 1 || integer > 9) {
    throw new Error('Number is not an integer between 1 and 9');
  }
  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for (let i = 1; i <= 9; i++) {
    //Append the current times table to the HTML
    displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
}
Enter an integer from 1 to 9:
<input id="integer" type="text">
<button onclick="table()" onclick="table2()">Generate times table</button>
<p id="display"></p>

另一种选择是使用具有 [1-9] 模式的表单(但不幸的是,您不能将 patterninput 结合使用type="number"):

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);
  if (!Number.isInteger(integer) || integer < 1 || integer > 9) {
    throw new Error('Number is not an integer between 1 and 9');
  }
  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for (let i = 1; i <= 9; i++) {
    //Append the current times table to the HTML
    displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
});
Enter an integer from 1 to 9:
<form>
  <input id="integer" pattern="[1-9]">
  <button>Generate times table</button>
  <p id="display"></p>
</form>

关于javascript - 如何将输入限制为数字 0-9?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58038192/

相关文章:

python - 欺骗 numpy/python 来表示非常大和非常小的数字

c++ - 使用C++输出运算符打印前导零?

javascript - 对于给定的容器高度,如何在每个给定高度(比如每 10 厘米)后重复容器 div 内的 html 元素?

javascript - 输入类型数字,里面有加号、减号或者 "e"显示为空值,为什么?

javascript - angular 5 - 模态指令

parsing - Haskell:读取一个数字(整数或 float )

javascript - 在网页的文本框中输出

jquery - 验证输入值是否为 1,000,000.00 或更大

javascript - [b,a] =[a,b] 和 const [b,a]=[a,b] 有什么区别

javascript - 是否每次需要 token 时都需要调用 acquireTokenSilent?