CODEWITHSUNDEEP
javascript
Mehul Chachada
Mehul Chachada

Reputation: 583

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

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 ?

Upvotes: 0

Views: 94

Answers (4)

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 1

Wais Kamal
Wais Kamal

Reputation: 6180

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>

Upvotes: 2

bini
bini

Reputation: 154

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;

Upvotes: 1

Exception_al
Exception_al

Reputation: 1079

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 = ....

Upvotes: 1

Related Questions