innerHTML is not refreshing the window in javascript

Question

I am trying to use innerHTML with arrays and it does not work, but if i use document.write my function works properly and I get the following: product 1 price 1 product 2 price 2 product 3 price 3 product 4 price 4 product 5 price 5 Any help will be appreciated. Following is the code:

var items = [
  ["product 1", "price 1"],
  ["product 2", "price 2"],
  ["product 3", "price 3"],
  ["product 4", "price 4"],
  ["product 5", "price 5"]
];


function testButton() {

  var j = 0;
  for (var i = 0; i < items.length; i++) {
    for (var j = 0; j < 2; j++) {
      document.getElementById("buttons").innerHTML = items[i][j] + "<br>";
      /*document.write(items[i][j] + "<br>");*/
    }

  }

}

#buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  font-size: 2em;
  border: solid;
}

<button id="buttons" onclick="testButton()">Next</button>

seems to work, you overwrite button with price 1, then price 2 etc ... you'll only ever see "price 5" though — Jaromanda X
– Jaromanda X, Commented Nov 28, 2017 at 23:56
@JaromandaX is right, since the browser works too fast to recognize, you couldn't even know what happen in the middle of its work. So technically, the value has been changed, but you could only see the last one when the browser stopped to work. — moon
– moon, Commented Nov 29, 2017 at 0:05

Chandan Rauniyar · Accepted Answer · 2017-11-29 00:08:31Z

You can build up the html in the loop and append it to a variable. Then after the loop ends, set the HTML for the button element.

var items = [
  ["product 1", "price 1"],
  ["product 2", "price 2"],
  ["product 3", "price 3"],
  ["product 4", "price 4"],
  ["product 5", "price 5"]
];

function testButton() {
  var html = '';
  var j = 0;
  for (var i = 0; i < items.length; i++) {
    for (var j = 0; j < 2; j++) {
      html += items[i][j] + "<br>";
      /*document.write(items[i][j] + "<br>");*/
    }
  }
  document.getElementById("buttons").innerHTML = html;
}

#buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  font-size: 2em;
  border: solid;
}

<button id="buttons" onclick="testButton()">Next</button>

Shadow · Accepted Answer · 2017-11-28 23:57:32Z

0

The code you've written replaces the contents of the button on each iteration of the for loop.

document.getElementById("buttons").innerHTML = items[i][j] + "<br>";

I think you want to append the contents, which I'm pretty sure is what successive calls to document.write does.

document.getElementById("buttons").innerHTML += items[i][j] + "<br>";

You may need to clear this before starting the for loop depending on your requirements.

answered Nov 28, 2017 at 23:57

Shadow

9,5474 gold badges50 silver badges60 bronze badges

2 Comments

user6642297 Over a year ago

Thank you very much. Just a + sign helped a lot.

Shadow Over a year ago

I'm glad to hear that. If you consider this answer helpful, don't forget to upvote/accept it :)

Collectives™ on Stack Overflow

innerHTML is not refreshing the window in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related