在 JavaScript 中单击按钮时如何显示列表?



我需要显示一个文本字段和一个按钮"生成时间表"。当用户输入 1 到 9 之间的整数并单击按钮时,相应的 2 个表将并排显示。时代 右侧的表必须显示为有序列表,左侧的表将仅显示不带项目符号。

当用户输入另一个号码并单击按钮时,旧的时间表消失,并且 将相应地生成新的时间表。

我试过这样做,但我只能设法显示每个时间表的第一个方程。请帮忙。顺便说一句,我是Javascript的新手,所以去轻松x

<html>
<head>
</head>
<body>
Enter an integer from 1 to 9:
<input id="integer" type="text">
<button onclick="table()">Generate times table</button>
<p id="display"></p>

<script>
function table(){
var integerInput = document.getElementById("integer");
var integer = Number(integerInput.value);
var display;
if  (integer == 1){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "1 x 1 = 1";
}
else if (integer == 2){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "2 x 1 = 2";
}
else if (integer == 3){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "3 x 1 = 2";
}
else if (integer == 4){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "4 x 1 = 4";
}
else if (integer == 5){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "5 x 1 = 5";
}
else if (integer == 6){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "6 x 1 = 6";
}
else if (integer == 7){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "7 x 1 = 7";
}
else if (integer == 8){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "8 x 1 = 8";
}
else if (integer == 9){
display = integer;
var displayField = document.getElementById("display");
displayField.innerHTML = "9 x 1 = 9";
}
}
</script>
</body>
</html>

下面是一个使用简单 for 循环的示例。它目前最多执行 12 个时间表,但更改循环上的条件将允许您更改输出的次数。

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 -> 12
for(let i = 1; i <= 12; i++) {
//Append the current times table to the HTML
displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
}
}
<html>
<body>
Enter an integer from 1 to 9:
<input id="integer" type="text">
<button onclick="table()">Generate times table</button>
<p id="display"></p>
</body>
</html>

相关内容

  • 没有找到相关文章

最新更新