Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Question

Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Has anyone encountered this issue before? I have a math table coding function, which runs when a button is clicked. However, when I click the button, the table appears on a new page instead of on the same page.

    <!doctype html>
<html>
<head>
    <title>Times Tables Trainer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="content">
    <p>Do you want to practice your times tables? Click the practice button below.</p>
    <button id="practice" name="practice" value="practice" onclick='practice()';>Practice Times Tables!</button>
<div id="1">
    <script type='text/javascript'>
    function practice(){
            var num = prompt("Enter a number", "0");
            var num1 = parseInt(num); 

                for(i= 1; i< 11; i++) {
                    document.writeln("<table border='1'><tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr></table>");
                                    }

                    }   

</script>

</div>
    </section>
</body>
</html>

I've already attempted to use document.getElementByID('div1').innerHTML = i; However, this code did not work. I believe it may be a beginner's mistake, but I'm not entirely sure. Any insights would be greatly appreciated!

Thank you in advance!

javascript html css loops for-loop

Answer 1

Answer №1

If you want to have better control over your table, consider using a div as a placeholder for it, like this:

function practice(){
var num = prompt("Enter a number", "0");
var num1 = parseInt(num); 
var table = document.getElementById("tablebody");

for(var i= 1; i< 11; i++) {
var td = document.createElement("td"); //create TD
td.innerHTML = i + " x " + num1 + " = " + (i * num1);
var tr = document.createElement("tr");
tr.appendChild(td); //add TD to the TR
table.appendChild(tr); //add TR to the table
}
document.getElementById("placeholder").style.display = ""; 
}

<section id="content">
<p>Want to learn the multiplication tables? Click on the practice button</p>
<button id="practice" name="practice" value="practice" onclick='practice()';>Practice Tables!   </button>
<div id="1"> <!-- Not sure why this div is here -->
</div>
<div id="placeholder" style="display:none;"> <!-- Placeholder area -->
<table border="1" id="tablebody"></table>
<div>
</section>

Remember to var the i in the loop to keep it scoped to the function. Using createElement may seem lengthy, but it's preferable for creating complex mark-up and easier to manage. It helps trace what's happening and can be broken into smaller functions.

Answer 2

If you want to have better control over your table, consider using a div as a placeholder for it, like this:

function practice(){
var num = prompt("Enter a number", "0");
var num1 = parseInt(num); 
var table = document.getElementById("tablebody");

for(var i= 1; i< 11; i++) {
var td = document.createElement("td"); //create TD
td.innerHTML = i + " x " + num1 + " = " + (i * num1);
var tr = document.createElement("tr");
tr.appendChild(td); //add TD to the TR
table.appendChild(tr); //add TR to the table
}
document.getElementById("placeholder").style.display = ""; 
}

<section id="content">
<p>Want to learn the multiplication tables? Click on the practice button</p>
<button id="practice" name="practice" value="practice" onclick='practice()';>Practice Tables!   </button>
<div id="1"> <!-- Not sure why this div is here -->
</div>
<div id="placeholder" style="display:none;"> <!-- Placeholder area -->
<table border="1" id="tablebody"></table>
<div>
</section>

Remember to var the i in the loop to keep it scoped to the function. Using createElement may seem lengthy, but it's preferable for creating complex mark-up and easier to manage. It helps trace what's happening and can be broken into smaller functions.

Answer 3

Answer №2

Everything is functioning correctly here. ## UPDATED based on previous requests to have it displayed below the button

function oefenen() {
  var num = prompt("Enter a number", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('results').innerHTML+=("<tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr>");
  }

}

<section id="content">
  
  <p>Do you want to learn the tables? Click the practice button</p>
  
  <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Practice Tables!</button>
  
  <table border="1" id=
"results">
    </table>
  
</section>

Answer 4

Everything is functioning correctly here. ## UPDATED based on previous requests to have it displayed below the button

function oefenen() {
  var num = prompt("Enter a number", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('results').innerHTML+=("<tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr>");
  }

}

<section id="content">
  
  <p>Do you want to learn the tables? Click the practice button</p>
  
  <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Practice Tables!</button>
  
  <table border="1" id=
"results">
    </table>
  
</section>

Answer 5

Answer №3

Here is a custom code to display the multiplication table for a specific number:

     <!doctype html>
<html>
<head>
    <title>Multiplication Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <section id="content">

  <p>Do you want to learn the multiplication tables? Click the practice button</p>

  <button id="practice" name="practice" value="practice" onclick='practice()' ;>Practice Tables!</button>
  <br />  <br />
  <div id="math">

  </div>

</section>
<script>
function practice() {
  var num = prompt("Enter a number", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('math').innerHTML+=(num1 + " x " + i + " = " + i * num1 + "<br/>");}

}
</script>
</body>
</html>

Answer 6

Here is a custom code to display the multiplication table for a specific number:

     <!doctype html>
<html>
<head>
    <title>Multiplication Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <section id="content">

  <p>Do you want to learn the multiplication tables? Click the practice button</p>

  <button id="practice" name="practice" value="practice" onclick='practice()' ;>Practice Tables!</button>
  <br />  <br />
  <div id="math">

  </div>

</section>
<script>
function practice() {
  var num = prompt("Enter a number", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('math').innerHTML+=(num1 + " x " + i + " = " + i * num1 + "<br/>");}

}
</script>
</body>
</html>

Answer 7

Answer №4

"When you use the document.write() method on an already loaded HTML document, it will overwrite all existing HTML elements" as mentioned by w3schools

In my opinion, utilizing innerHTML is a more suitable approach

Answer 8

"When you use the document.write() method on an already loaded HTML document, it will overwrite all existing HTML elements" as mentioned by w3schools

In my opinion, utilizing innerHTML is a more suitable approach

Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The protection ensured by employing an extensive hash in the query string for the recognition of a changing document

Delete the element that was generated using jQuery

Two sets of buttons, however, one set is carrying out the incorrect function

Populate a PHP array with data retrieved using MySQL fetch operation

Enhancing text display and spacing in Safari versions 5 to 6, as well as Chrome

The structure of the figure tag for HTML5 validation

Having trouble setting the select value with JavaScript in the Selenium web driver

Encountering issues with loading a module in Aurelia

Turn a textfield on and off in real-time

Left-aligned arrow for Material UI select dropdown

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Interacting Shadows with BufferGeometry in react-three-fiber

Troubleshooting: React CSS Transition Fails to Trigger on Exit and Entry

I need help accessing data from a REST API and displaying it in a table

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

Utilizing ReactJS to dynamically display various content based on onclick event

The function you are trying to call is not callable. The type 'Promise<void>' does not have any call signatures. This issue is related to Mongodb and Nodejs

Oops! You can only have one parent element in JSX expressions

The cascade option in TypeORM entities

What causes the variable assigned in the outer subscription's scope to change as the inner subscriptions change?