JavaScript Loop Output

Question

all. I'm new to JavaScript, so hopefully this is a pretty easy question for you all. But I absolutely, for the life of me, cannot figure out how to do this! I'm creating a times table program, and I need the output to look something like this:

5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
...

...and so on. However, whenever it outputs to the screen, it only displays the LAST output from the loop. So it will show "5 x 12 = 60". I need it to show each individual output everytime the program goes through the loop. How would I go about doing this?

Much thanks in advance!

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">

        <!-- 
        Input
            User clicks the "Compute Table" button.
        Processing
            The computer creates a times table based on the users' input.
        Output
            Outputs the table to the user.
        -->


<title>Times Table</title>
<script>
    function computeTable() {

    // Declaring some variables and pulling the integer from the HTML form. Nothing to see here.
    var integer = parseInt(document.getElementById('input').value);
    var i = 1;

    // Running the loop and doing all the arithmetic
    while (i < 12) {
        i++;
    }

    // This line displays the output to the user
    var output = document.getElementById('outputdiv');
    output.innerHTML = integer + " x " + i + " = " + (integer * i);
    }
</script>
</head>

<body>
<h1>Times Table</h1>

Please enter a positive integer: <input type="text" id="input">
<button type="button" onclick="computeTable()">Compute Table</button>
<hr>
<div id="outputdiv" style="font-weight:bold"></div>
</body>
</html>

Farmer Joe · Accepted Answer · 2013-11-12 23:43:06Z

1

You need to update your div each time the variable is incremented.

var output = document.getElementById('outputdiv');
while (i < 12) {
    output.innerHTML = integer + " x " + i + " = " + (integer * i);
    i++;
}

Though I think it will update your result very quickly and you may not be able to see each result. Maybe you want something like this?

var output = document.getElementById('outputdiv');
var html;
if (output.innerHTML.length != 0) {
    output.innerHTML = "";
}
while (i < 12) {
    html = output.innerHTML;
    html += (i > 1 ? ", " : "") + integer + " x " + i + " = " + (integer * i);
    output.innerHTML = html;
    i++;
}

Which should give you something like result_1, result_2, result_3, //etc.

Here is a working example. Also, as Johnannes pointed out in his answer and comment, updating the innerHTML can be done directly output.innerHTML += value;

edited Nov 12, 2013 at 23:43

answered Nov 12, 2013 at 23:37

Farmer Joe

6,1001 gold badge33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johannes H. Over a year ago

Instead of reading innerHTML, appending to it and writing back, you could just append to innerHTML directly - see my answer.

Farmer Joe Over a year ago

@JohannesH. I agree, more efficient, I wrote it explicitly to better illustrate the technique.

Johannes H. · Accepted Answer · 2013-11-12 23:40:07Z

0

There are multiple problems here.

1) You're only outputting once - so no matter what you do, there is only one line. Sound's reasonable, right?

2) Even if you did output multiple times, output.innerHTML = "..." would override any previous assignements. 'cause it's an assignement, it doesn't APPEND.

So the solution is APPENDING INSIDE the loop:

var i = 1;
while ( i < 12 ) {
    output.innerHTML += integer + " x " + i + " = " + (integer * i) + "<br>";
    i++;
}

This can be done in a shorter way, using a for loop:

for (var i = 1 ; i < 12 ; i++) {
    output.innerHTML += integer + " x " + i + " = " + (integer * i) + "<br>";    
}

answered Nov 12, 2013 at 23:40

Johannes H.

6,1671 gold badge23 silver badges44 bronze badges

2 Comments

user2985455 Over a year ago

Thank you, thank you, THANK YOU! I didn't know it was something so simple! I'll keep working. Someday I'll get to be awesome at programming like you all!

Johannes H. Over a year ago

It's really just a matter of practice, so I'm certain you will get better :D

Collectives™ on Stack Overflow

JavaScript Loop Output

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related