tyler tyler - 2 months ago 18
Javascript Question

How to make a simple 5 line JavaScript Multiplication table for loop

I am currently struggling on this project, as I have no idea what goes where and through the various searches online, I get different answers so the code I have currently have most likely is no where near correct. The multiplication table goes 1 - 10 and shows multiplication answers up to 5. (1x1 = 1, 1x2 = 2, all the way up to 5x10, if that makes sense) I need a correct example of my code.



<!DOCTYPE html>
<html>
<head>
<title>Multiplication Tables</title>
</head>
<body>
<p>Enter a number below to see its multiplication table.</p>
<input type="text" name="txtNumber" id="txtNumber" placeholder="Enter a number" />
<br />
<br />

<button onclick="DisplayTable();">Click Me</button>
<div id="multiTable"></div>

<script language="javascript">
function DisplayTable(){
for (var i = 1; i <= 10; i++){
for (var i = 1, var j = 0; (i+j) <= 10; i++, j += i) {
System.out.print("\t"+i*j);
System.out.println();
}
}
}
</script>

</body>
</html>




Answer

1) When inserting/including Javascript, please use type="text/javascript" instead of language="javascript", because the latter is not standard code.

2) As already mentioned in the comments, you're trying to redefine the counter of your first for-loop (var i = 1) in your second for-loop (var i = 1, var j = 0). It's better to use the i counter for the outer for-loop and only j for the inner/second for-loop. (Since the i counter is already available in both loops, and you don't want to reset it there.)

3) System.out.print and System.out.printLn are not JavaScript functions. Javascript's equivalent is document.write("Some text");. But this function is NOT recommended, since it will clear all HTML when you call it after the page is loaded (which is the case here). So, instead, in your Javascript function, use a string variable where you store your generated HTML-code. Then let your Javascript function add a new table row/cell on every iteration in your for-loop.

4) When creating a table in HTML, don't use \t, instead use the appropriate <table> tag, with table rows (<tr>) and table cells (<td>).

5) It's unclear what you want to do with just the one input-field. I guessed you want to use input's to let the user choose where to start and end with the multiplications (rows and columns). In that case, you need 4 input-fields (with unique ID's). These 4 values are fetched at the start of your Javascript function to use them as start and end points for your for-loops.

Example:

function DisplayTable(){
  /* first, get the values of the input fields and parse them as integers */
  var colStart = parseInt(document.getElementById("startCol").value);
  var colEnd = parseInt(document.getElementById("endCol").value);
  var rowStart = parseInt(document.getElementById("startRow").value);
  var rowEnd = parseInt(document.getElementById("endRow").value);
  
  /* create a buffer variable for the new html code & put a opening table tag in it (with a border for clearity) */
  var htmlBuffer = "<table border='1'>";
  
  for (var i = rowStart; i <= rowEnd; i++){
    /* add a opening table row tag to the buffer */
    htmlBuffer += "<tr>";
    
    for (var j = colStart; j <= colEnd; j++) {
      /* add a table cell with the multiplication inside it to the buffer */
      htmlBuffer += "<td>"+ (i*j) + "</td>";
    }
    
    /* add a closing table row tag to the buffer */
    htmlBuffer += "</tr>";
  }
  
  /* add a closing table tag to the buffer */
  htmlBuffer += "</table>";
  
  /* print/put generated html code inside the DIV element */
  document.getElementById("multiTable").innerHTML = htmlBuffer;
}
<p>Fill in the numbers below and click "Generate table" to see their multiplication table.</p>
    Start columns with:<br />
	<input type="text" name="startCol" id="startCol" placeholder="Enter a number" value="1" /><br />
    End columns with:<br />
	<input type="text" name="endCol" id="endCol" placeholder="Enter a number" value="20" /><br />

    <br />

    Start rows with:<br />
	<input type="text" name="startRow" id="startRow" placeholder="Enter a number" value="1" /><br />
    End rows with:<br />
	<input type="text" name="endRow" id="endRow" placeholder="Enter a number" value="10" /><br />

    <br />
	<br />
	
	<button onclick="DisplayTable();">Generate table</button>
    <br />
	<div id="multiTable"></div>