How to pass values from javascript to html?

Question

I am trying to generate multiplication tables in JavaScript and pass the values to the rows of a table in html. I want an output like the image shown. Can anyone help me with this. I'm new to Javascript and am trying to figure out some of the basics. Thanks.

Table I want to produce using JavaScript

<html>
<head>
<title>Multiplication Table Generator</title>

<script language="javascript" type="text/javascript">


function generateTable()
{
 var myVar = prompt("A number?", "");
 var myVar = multTables.number.value;
 var myString = "";
 for (i=1; i<=myVar; i++) {
   myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
 }
}

</script>

</head>
<body>
<h1>Times Tables</h1>
<form name="multTables">

Enter a number<input type=text name="number">
<input type=button name="button1" value="Show Table" onclick="generateTable()">

<table border=1>
<tr><th>times tables</th></tr>
<tr><td>
<!-- 1X7, 2X7...etc-->
</td>
<td>
<!-- 7, 14, 21...etc-->
</td>
</tr>
</table>
</form>
</body>
</html>

Do you understand the basics of creating html elements in Javascript? I ask so I get a sense for what level of understanding you currently have of what needs to be done here — thatidiotguy
– thatidiotguy, Commented Apr 15, 2014 at 15:27
Try creating a Table with an id. Then append the table rows as children. Keeping references to them in an array. Then create two utility functions to generate the left column values and right column values respectively. Update the innerHtml of the elements when the button is clicked. — Joe
– Joe, Commented Apr 15, 2014 at 15:29
yeah-I have a good understanding of html. I know how to generate tables etc but it's more mapping the results from Javascript back to populate these tables that I am having a problem with. Thanks — kellzer
– kellzer, Commented Apr 15, 2014 at 15:29
@NiallKelly What you need to do then is create the table element in Javascript and populate it in the for loop you already have. You can then insert the table element into the DOM. If that does not make sense I can provide an example. — thatidiotguy
– thatidiotguy, Commented Apr 15, 2014 at 15:30
@thatidiotguy Thanks a lot for your help. If you have an example that you can point me to and it's not much hassle that would be great! Thanks — kellzer
– kellzer, Commented Apr 15, 2014 at 15:40

Rupam · Accepted Answer · 2014-04-15 15:42:45Z

I don't understand why you are using html form and js prompt at the same time.

Ok, you can use this :

       <html>
    <head>
    <title>Multiplication Table Generator</title>

    <script language="javascript" type="text/javascript">


    function generateTable()
    {
     //var myVar = prompt("A number?", "");
     var myVar = document.forms.multTables.x.value;
     var myString = "<tr><th>"+ myVar + " times tables</th></tr>";
     for (i=1; i<=myVar; i++) 
     {
        myString += "<tr><td>";
       myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
       myString += "</td></tr>";
     }
     document.getElementById('t').innerHTML = myString;
     return false;
    }

    </script>

    </head>
    <body>
    <h1>Times Tables</h1>
    <form name="multTables">

    Enter a number<input type="text" name="number" id="x">
    <input type="button" name="button1"  value="Show Table" onclick="generateTable()">

    <table border="1" id="t">

    </table>
    </form>
    </body>
    </html>

thatidiotguy · Accepted Answer · 2014-04-15 15:41:59Z

Okay so I set up a small example here that should give you a nice example of how to do this:

http://jsfiddle.net/MHfyE/

HTML:

<div id="content">

</div>        
<button id="button">Do It!</button>

Javascript:

var buttonElt = document.getElementById("button");
buttonElt.onclick = function() {
    var elt = document.createElement("div");
    for (var i = 0; i < 10; i++) {
        var childElt = document.createElement("p");
        childElt.innerHTML = i;
        elt.appendChild(childElt);    
    }
    var parentElt = document.getElementById("content");
    parentElt.appendChild(elt);
}

I feel like this is enough to get you started.

Lauri Elias · Accepted Answer · 2014-04-15 15:40:48Z

First, you're overwriting myVar right after asking it in the prompt, doesn't make much sense.

var myVar = prompt("Give me my var!");
console.log(myVar);

Then you'll somehow have to generate the HTML, you can do it by using jQuery and appending elements or vanilla JS or just generating the raw HTML string. Or using something like AngularJS's ng-repeat.

Here's a really simple example:

var table = document.createElement("table");
for (var i = 0; i < 10; i += 1) {
  var tableRow = document.createElement("tr");
  for (var j = 0; j < 10; j += 1) {
     var tableCell = document.createElement("td");
     tableCell.innerHTML = i * j;
     tableRow.appendChild(tableCell);
  }
  table.appendChild(tableRow);
}

Fiddle: http://jsfiddle.net/jbNbs/1/

erosman · Accepted Answer · 2014-04-15 16:13:44Z

Here is a simple example .... This way, the table is NOT generated by the JavaScript. JavaScript fills the cell data. Enter a number in the box, hit enter If the entry is not a number, it will reject it (won't do anything)

The JavaScript

function generateTable(n) {

  n = parseInt(n); // convert to integer
  if (!n) { return; } // end execution if not found

  // get all the tr in the table
  var tr = document.querySelectorAll('#timesTable tr');
  tr[0].children[0].textContent = n + ' Times Table';

  for (var i = 1; i <= 9; i++) {

    tr[i].children[0].textContent = i + ' x ' + n + ' =';
    tr[i].children[1].textContent = i * n;
  }

}

The HTML

Enter a number: <input type="text" id="box" onchange="generateTable(this.value);">
<br /><br />

<h1>Times Tables</h1>

<table id="timesTable" border="1">
<tr><th colspan="2">Times Table</th></tr>
<tr><td style="width: 100px;">&nbsp;</td><td style="width: 50px;">&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

Good luck :)

Collectives™ on Stack Overflow

How to pass values from javascript to html?

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related