Question

-5

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

rated 0 times [ 1] [ 6] / answers: 1 / hits: 18155 / 9 Years ago, sat, february 28, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 9 Years ago bretd · Accepted 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>