.innerHTML Not Displaying While Using a For Loop

Question

I am attempting to write a script that will allow users to input numbers into a screen, add them to an array and then print the values on an innerHTML element.

However, when I attempt to use it in a for loop, nothing is printing out and it goes to a new page where the only thing displayed is the first number entered.

I am new at JavaScript and might be doing it incorrectly. Please let me know!

Thanks in advance

var a = [];

var count = 0;

function addNum() {
  a[count] = document.getElementById('input').value;
  count++;
}

function printValues() {
  for (i = 0; i < a.length; i++) {
    document.write(a[i], " ").innerHTML = array;
  }
}

<input type="text" id="input">
<br>
<input type="button" onclick="addNum();" value="Add Number">
<br>
<input type="button" onclick="printValues();" value="Print Numbers">
<p>
  <a id="array"></a>
</p>

Don't use document.write. It will remove everything else that was on your page. See this note on MDN: Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document. — Matt Burland
– Matt Burland, Commented Jul 31, 2015 at 17:14
I'm not sure what the addNum() function is intended to do. I looks like you may want to split() the value into an array. — showdev
– showdev, Commented Jul 31, 2015 at 17:15
Not sure where you learned that syntax for document.write, but that is not right. — epascarello
– epascarello, Commented Jul 31, 2015 at 17:16
@showdev I am just playing with Arrays at the same time to get the hang of it — Nicholas Dry
– Nicholas Dry, Commented Jul 31, 2015 at 17:16

Matt Burland · Accepted Answer · 2015-07-31 17:29:39Z

2

From MDN:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

So your problem is caused by document.write. Once you write to your already loaded document, everything else is thrown away, including your javascript. (You had other problems too with just how you were using it, but this is the main problem).

You have an element with the id array, which I assume is where you want to put your numbers. So you need to get that element with getElementById and then set its innerHTML. You can use array.join to avoid the loop.

var a = [];

var count = 0;

function addNum() {
  a[count] = document.getElementById('input').value;
  count++;
}

function printValues() {
  document.getElementById('array').innerHTML = a.join(",");
}

<input type="text" id="input">
<br>
<input type="button" onclick="addNum();" value="Add Number">
<br>
<input type="button" onclick="printValues();" value="Print Numbers">
<p>
  <a id="array"></a>
</p>

A couple of other things you should look at. After adding a number in addNum, you should probably clear the text box by setting the value to null. Secondly, it's preferred to add event handlers in code rather than in your HTML.

edited Jul 31, 2015 at 17:29

answered Jul 31, 2015 at 17:22

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

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

3 Comments

Nicholas Dry Over a year ago

I'm assuming the .join method is a built in one to arrays that takes the character parameter that splits the indexes?

Matt Burland Over a year ago

@NicholasDry: MDN is a wonderful resource. You should become familiar with it. It's often the first result when you search for a javascript method (if you see W3 Schools instead, skip that and go down to the MDN link).

Nicholas Dry Over a year ago

Okay awesome, I had been looking at W3, but I will take a look at MDN. thanks so much!

Mehmood · Accepted Answer · 2015-07-31 17:21:33Z

0

function printValues() {
    var strValues='';  // Initialize a temporary variable 

    for (i = 0; i < a.length; i++) {
      strValues += a[i] + ' ';            
    }
    document.write(strValues); //Writting variable to document.
}

In the above example we have create a temporary variable and sets the default value to blank. Then in for loop we concatenate the array value to variable using += sign.

edited Jul 31, 2015 at 17:21

answered Jul 31, 2015 at 17:16

Mehmood

9315 silver badges18 bronze badges

3 Comments

showdev Over a year ago

A little explanation might be helpful.

Nicholas Dry Over a year ago

The purpose is to set the values to a string value and then print that string right?

Mehmood Over a year ago

I added some explanation so that you can understand what the above code is doing.

The Dark Knight · Accepted Answer · 2015-07-31 17:25:34Z

What you are doing is not the correct way of setting stuff up in innerHTML . Also, you are not retaining the values to be printed on to the screen. Everytime , you click on print the new value inputted by the user is just getting passed and the old value is getting replaced with the new one . Here the variable valueToBePrinted will always remember the last value that was inputted as it concatenates all the inputted values to it, once the user is done with his/her input .

Look at the following piece of code :

var a = [];
var count = 0;

function addNum() {

    a[count] = document.getElementById('input').value;
    console.log(a[count]);
    count++;
}

function printValues() {
    var valueToBePrinted='';
    for (i=0;i<a.length;i++) {
      valueToBePrinted += a[i] + ' ';
      console.log(valueToBePrinted)
      document.getElementById('array').innerHTML =valueToBePrinted;
    }
}

Also , look at the result in the Fiddle here : Fiddle

srinivasan rb · Accepted Answer · 2015-07-31 17:32:53Z

0

The statement "document.write(a[i], " ").innerHTML = array;" is wrong. There is no variable named array declared in the code.

The correct form to print all the numbers using document.write is,

for (i=0;i<a.length;i++) {
     document.write(a[i] + " ");
}

If you need sum of all input numbers and the print the sum, then you can simply sum it up in a variable as you click addNumber button as,

var total = 0;
function addNum() {
    total += Number(document.getElementById('input').value);
}

function printValues() {
    document.write(total);
}

answered Jul 31, 2015 at 17:32

srinivasan rb

112 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2015-07-31 17:50:04Z

You typically would not use a "count" variable to add items to an array but would instead push to the array however I kept it in case you needed it otherwise.
You would as others noted not do a document.write to an element but instead use the innerHTML and replace or append to that.
Odd also that you are putting the innerHTML in a link <a /> element but since that is what you are using I will reproduce that.
IF you do want to use these as number (integers?) you would want to parse them with parseInt(string, radix); or parsefloat.
You did not have i set as a variable object so I did that here

Slightly reworked code here:

var a = [];

var count = 0;

function addNum() {
    a.push(parseInt(document.getElementById('input').value, 10));
    count++;
}

function printValues() {
    var i;
    var myValues = "";
    for (i = 0; i < a.length; i++) {
        myValues = myValues + a[i] + " ";
    }
    var element = document.getElementById("array");
    element.innerHTML = myValues;
}

Here is the code reproduced as a working example: http://jsfiddle.net/coffw8tg/

Collectives™ on Stack Overflow

.innerHTML Not Displaying While Using a For Loop

5 Answers 5

3 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest