javascript - 如何将输入限制为仅数字 0-9?
问题描述
我需要以一种只有数字 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]
(尽管不幸的是,您不能将 apattern
与 an结合使用input 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>
推荐阅读
- python - Python Pandas:在大型 DF 中找到局部最大值的最佳方法
- sql - 如何在标准 SQL (BigQuery) 中获取会话持续时间
- javascript - 如何直接在猫鼬的嵌套地图中设置值
- python - 如何从 python 脚本转发到 rds 实例
- sql-server - 如何动态读取多个存储过程的查询执行计划
- swiftui - SwiftUI:如何让搜索栏成为第一响应者?
- react-native - 如何在 react-native expo 中将资产库:// 转换为文件://?
- python - 有没有办法或例子用 ply 和 ast 创建抽象的 sytanx 树?
- android - 无法在颤振中创建捆绑包
- javascript - 使用 innerHTML 更改 Div 内容