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

Question

I need to display a text field and a button “Generate times table”. 我需要显示一个文本字段和一个“ Generate times table”按钮。 When the user enters an integer from 1 to 9 and clicks the button, the corresponding 2 times tables will appear side-by-side. 当用户输入1到9之间的整数并单击按钮时，相应的2次表将并排出现。 The times table on the right must be displayed as an ordered list, and the table on the left is to be displayed just listed without bullet points. 右侧的时间表必须显示为有序列表，而左侧的时间表仅显示为不带项目符号的列表。

When the user enters another number and click the button, the old times tables disappear and the new times tables will be generated accordingly. 当用户输入另一个数字并单击按钮时，旧时间表将消失，相应地将生成新时间表。

I have tried doing this, but I can only manage to display the first equation of each times table. 我已经尝试过这样做，但我只能设法显示每个时间表的第一个方程式。 Please help. 请帮忙。 Btw I'm new to Javascript so go easy x 顺便说一句，我是Java的新手，所以轻松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>

Answer 1

Here is an example using a simple for loop. 这是一个使用简单的for循环的示例。 It currently does the times tables up to 12, but changing the condition on the loop will allow you to change the amount of times it is output. 目前，它最多可以处理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>

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

问题描述

1 个解决方案

解决方案1
4 2019-09-18 03:38:31

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

问题描述

1 个解决方案

解决方案1 4 2019-09-18 03:38:31

解决方案1
4 2019-09-18 03:38:31