Null style property on DOM element: JavaScript

Question

I am trying to add some custom JavaScript to an Enjin web platform. In the platform's HTML, there is a common element in the forums that I want to change the background color of.

<div class="block-container">...content...</div>

I am attempting to access it with the following JavaScript code:

function onStart() {
for (block in document.getElementsByClassName("block-container")) {
    console.log("block");
    if (block.style != null) {
        console.log("styleNotNull");
        block.style.backgroundColor = "#252525";
    }
}
}window.onload = onStart;

However, when the page loads, it logs the word "block" in the console for each element but does not change the color or log "styleNotNull". If I remove the null checker, it errors out and says that the style property is null. Most of the answers on this topic have been because the element was missing, but that is obviously not the case because the for loop is executing.

Are there any errors in console?

Andrei
– Andrei

2015-03-07 03:46:18 +00:00
Commented Mar 7, 2015 at 3:46 — Andrei
– Andrei, Commented Mar 7, 2015 at 3:46

Andrei · Accepted Answer · 2015-03-07 04:03:59Z

1

Pure javascript

Use ordinary for loop:

var blocks = document.getElementsByClassName("block-container");
for (var i = 0; i < blocks.length; i++) {
    var block = blocks[i];
    block.style.backgroundColor = "#252525";
}

Working jsfiddle.

Basically for..in loop iterates through the properties of an object passed. More info here.

JQuery

This could be easily done by jQuery. So just in case here is an example:

$(function() {
    $(".block-container").css("background-color", "#252525");
});

Working jsfiddle.

edited Mar 7, 2015 at 4:03

answered Mar 7, 2015 at 3:48

Andrei

44.9k39 gold badges163 silver badges228 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:43:24Z

0

In JavaScript, a for..in loop will loop through the object passed, but for each iteration, the iterator variable will be assigned the key of the current element, not the value. So, try this instead:

function onStart() {
    var elements = document.getElementsByClassName("block-container");
    for (key in elements) {
        elements[key].style.backgroundColor = "#252525";
    }
}

window.onload = onStart;

Edit:

For a discussion about whether to use for..in or a typical for loop for arrays in JavaScript, see Why is using "for...in" with array iteration a bad idea?

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Mar 7, 2015 at 3:49

Aaron

2282 silver badges10 bronze badges

1 Comment

Evan McCoy Over a year ago

Thanks, worked like a charm. Thanks for explaining why as well.

Community · Accepted Answer · 2017-05-23 11:56:53Z

0

The for in loop is for enumerating properties but you want to iterate over an array. Use a for loop instead. Or Array.prototype.forEach if it's available to all the browsers you're targetting.

See this post for more info - Loop through an array in JavaScript

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 7, 2015 at 3:51

Matthew Kime

7541 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Null style property on DOM element: JavaScript

3 Answers 3

Pure javascript

JQuery

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Pure javascript

JQuery

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related