HTML Template Doesn't Work with For-In Loop JavaScript

Question

EDIT: Here's the JSFiddle for the following question.

So I'm trying to activate a template with JavaScript and it wasn't working for a while, and I finally fixed it by changing a For-In loop into a For loop in a seemingly unrelated block of code.

The following code is the For-In loop I changed to a for loop. The commented out code was the original code that didn't work and the uncommented for loop is the now working code. This code was used to change font size for text within all instances of a class element:

var release4 = document.getElementsByClassName("release-4");

// for (item in release4){
//  release4[item].style.fontSize = "2em";
// };

for (var i = 0 ; i < release4.length ; i++) {
  release4[i].style.fontSize = "2em";
}

This is the code I used to activate my template. It is not part of the release-4 class:

var tmpl = document.getElementById('hidden');
document.body.appendChild(tmpl.content.cloneNode(true));

And here is the HTML that goes with it:

<html>
<head>
  <title>Manipulate the DOM</title>
</head>
<body>
  <div id="release-0">
    <p class="release-4"> Here is some text, add a class "done" to the parent div</p>
  </div>

  <div id="release-1">
    <p>remove the #release-1 div</p>
  </div>

  <h1>Change this text to finish release 2</h1>

  <div id="release-3">
    <p class="release-4"> add CSS to this div</p>
  </div>

  <template id="hidden">
    <div>
      <h1> Congrats! You finished the challenge.</h1>
      <img src="http://media.giphy.com/media/2UpzC3iPenf44/giphy.gif">
    </div>
  </template>

<script type="text/javascript" src="home_page.js"></script>
</body>
</html>

My question is why did changing the For loop make a difference? Thanks everyone!

All other code in the JS file only affect IDs release-0, release-1, and release-3, and the h1 tag. The class name, display, innerHTML, and background color were the only changes made to them.

I deleted my answer - you're correct, I wasn't thinking. To test this, you could set up a copy of your code on jsfiddle for us to run / fork. — boisvert
– boisvert, Commented Nov 20, 2014 at 9:03
Thanks for the suggestion! I've added the fiddle to the code. — Brewster
– Brewster, Commented Nov 21, 2014 at 17:12

David Knaack · Accepted Answer · 2017-04-17 16:06:37Z

2

If I console.log() item in the for in loop it yields:

0
1
length
item
namedItem

I think length, ìtem and namedItem make it error.

Updated: With Array.from it works as expected.

var release4 = Array.from(document.getElementsByClassName("release-4"));
for (item in release4){
    release4[item].style.fontSize = "2em";
};

edited Apr 17, 2017 at 16:06

answered Nov 21, 2014 at 15:56

David Knaack

1721 gold badge1 silver badge8 bronze badges

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

1 Comment

Brewster Over a year ago

You're absolutely right! I remember now, for some reason the "for-in" loop also accessed the properties that were stored when calling 'getElementsByClassName", which is why it was breaking.

Collectives™ on Stack Overflow

HTML Template Doesn't Work with For-In Loop JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related