JS Change class of element

Question

All I'm trying to do is toggle the class of an elements by ID when they are clicked on.

<script>

function selectLoad(id)
{
    if(document.getElementById(id).className == "load") {
        document.getElementById(id).className = "loadSelected";
    } else {
        document.getElementById(id).className = "load";
    }
}

</script>

<div class="load" id=" ... set by PHP per element ... " onclick="selectLoad(this)">

This returns an error...

Uncaught TypeError: Cannot read property 'className' of null

So I guess it doesn't like the conditional.

I'm new to JS and need help, thanks in advance.

[Check it out](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — jamesplease, May 18 '13 at 21:10
`document.getElementById(id)` is returning null. Make sure you're passing in the correct id to `setLoad` — Steven Wexler, May 18 '13 at 21:11
Also, save the return value of getElementsById in a var, you use a lot useless time searching the dom for one element — Wouter J, May 18 '13 at 21:14
I guess that ´"selectLoad(this)"´ might trouble you. More easy setting with php the id: ´"selectLoad(\''.php_var.'\');" — rokdd, May 18 '13 at 21:17

score 5 · Accepted Answer · answered May 18 '13 at 21:13

You are passing the dom element itself (using this), not the id.

You should change the code to

function selectLoad(element)
{
    if (element.className == "load") {
        element.className = "loadSelected";
    } else {
        element.className = "load";
    }
}

Rob Johnstone · Answer 2 · 2013-05-18T21:20:01.967

2

I think you are passing an id that does not exist in the dom. Has the dom loaded before your javascript is executed? Move the script to the bottom of the page just before the closing html tag

EDIT: Following discussion in comments below the error is this line:

<div class="load" id=" ... set by PHP per element ... " onclick="selectLoad(this)">

it should read

<div class="load" id=" ... set by PHP per element ... " onclick="selectLoad(this.id)">

edited May 18 '13 at 21:20

answered May 18 '13 at 21:12

Rob Johnstone

1,704
9
14

1

OP's not passing an ID at all. The call is passing in a DOM element. – zzzzBov May 18 '13 at 21:14
yes he is. In selectElementById(id), id is an id! The problem is that the id is not one that exists on an element in the dom – Rob Johnstone May 18 '13 at 21:16
1

"Has the dom loaded before your javascript is executed?" if you'd read the HTML, you'd know the script was being used as an `onclick` callback, which means the DOM has definitely loaded. – zzzzBov May 18 '13 at 21:16
I wasn't talking about `document.getElementById`, I was referring to where OP is calling `selectLoad(this)` which is passing a DOM element as a parameter, as `this` refers to the `div`. – zzzzBov May 18 '13 at 21:18
you should use `this.id` rather than `this.getAttribute('id')`, as it's much more concise. – zzzzBov May 18 '13 at 21:22
@zzzzBov - agreed. Edited accordingly – Rob Johnstone May 18 '13 at 21:23

Gabriel Petrovay · Answer 3 · 2013-05-18T21:16:05.453

Your code is not safe because you don't check if you have the DOM element with the given id

That is why you get the error: Cannot read property 'className' of null

if(document.getElementById(id)) {
    // ... do something and do not go further.
    return;
}

And the problem is passing this when you call selectLoad. At this point, this is the DOM element, not the string that yo expect: ... set by PHP per element .... So you have to change the code accordingly.

JS Change class of element

3 Answers3

Linked