How to display more than one time in JavaScript using for loop

Question

I was learning JS From W3 schools and encounter this program which checks the attribute length. I later modified it to display name of attribute that an element has. Here is the code

function myFunction() {
  for (var counter = 0; counter < 2; counter++)
    var a = document.getElementById("myBtn").attributes[counter].name;
  document.getElementById("output").innerHTML = a;
}

<html>

<body>
  <p>Click the button to see how many attributes the button element have.</p>
  <p id="output">

  </p>
  <button id="myBtn" onclick="myFunction()">Try it</button>
</body>

</html>

I expected O/P to be as :

id onclick

But for some reason it only display the last attribute that an element holds in this case its onclick if it were class or something else it would have displayed that.

Whats the reason for that ?

you are runnig loop its getting overwrite

Akshay
– Akshay

2017-01-17 13:08:12 +00:00
Commented Jan 17, 2017 at 13:08 — Akshay
– Akshay, Commented Jan 17, 2017 at 13:08

Wais Kamal · Accepted Answer · 2017-01-17 13:12:19Z

2

You have a very simple mistake in your code. Your code will first set the innerHTML of the <p> element to "id". Then, it will overwrite it with the next attribute, i.e. "onclick". To fix this, change

document.getElementById('output').innerHTML = a

to

document.getElementById('output').innerHTML += a + "<br>"

The <br> is just to seperate the attributes from each other. Here is the whole snippet:

function myFunction() {
  for (var counter = 0; counter < 2; counter++) {
    var a = document.getElementById("myBtn").attributes[counter].name;
    document.getElementById("output").innerHTML += a + "<br>";
  }
}

<html>

<body>
  <p>Click the button to see how many attributes the button element have.</p>
  <p id="output">

  </p>
  <button id="myBtn" onclick="myFunction()">Try it</button>
</body>

</html>

answered Jan 17, 2017 at 13:12

Wais Kamal

6,2503 gold badges21 silver badges47 bronze badges

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

Comments

Exception_al · Accepted Answer · 2017-01-17 13:06:04Z

1

Try Below instead

function myFunction() {
var a="";
  for (var counter = 0; counter < 2; counter++){
     a+= document.getElementById("myBtn").attributes[counter].name;
}
  document.getElementById("output").innerHTML = a;
}

Your code displays the last value set to a. And you do not append / add the names of the attributes to a, instead you overwrite a with

var a = ....

answered Jan 17, 2017 at 13:06

Exception_al

1,0791 gold badge11 silver badges21 bronze badges

Comments

bini · Accepted Answer · 2017-01-17 13:09:20Z

1

This happens because you change the innerHTML of the element, which means you change the whole HTML of that element.

To do what you want, you could concatenate the results on the current innerHTML or create elements and add the values inside of them, then append them to the document.

For example:

var output = document.getElementById('output');
output.innerHTML = output.innerHTML + ' - ' + a;

answered Jan 17, 2017 at 13:09

bini

1541 silver badge5 bronze badges

Comments

Davin Tryon · Accepted Answer · 2017-01-17 13:19:30Z

1

At the moment, you are re-assigning a each time the loop runs (var a = ...):

function myFunction() {
  for (var counter = 0; counter < 2; counter++) {
    var a = document.getElementById("myBtn").attributes[counter].name;
  }
  document.getElementById("output").innerHTML = a;
}

This means that a ends up being the last item.

Perhaps instead, add each attribute to an array:

function myFunction() {
  var arr = [];
  for (var counter = 0; counter < 2; counter++) {
    arr.push(document.getElementById("myBtn").attributes[counter].name);
  }
  document.getElementById("output").innerHTML = arr.join(' ');
}

Also, use curly braces for where your scopes are. You want that output to be after the loop.

edited Jan 17, 2017 at 13:19

answered Jan 17, 2017 at 13:06

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Collectives™ on Stack Overflow

How to display more than one time in JavaScript using for loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related