CODEWITHSUNDEEP
javascriptdisplay
Devression
Devression

Reputation: 457

How do I display a list when button is clicked in JavaScript?

I need to display a text field and a button “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. 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

<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>

Upvotes: 2

Views: 2530

Answers (1)

Snel23
Snel23

Reputation: 1379

Here is an example using a simple for loop. 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.

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>

Upvotes: 3

Related Questions