I have this simple line of code:
document.getElementById('tb').style.background = '#FFFFFF';
My CSS stylesheet is:
.tb {
background: #2f2f2f;
}
Why isn't my Javascript code working?
I'm new to Javascript so if you could please explain the problem rather than tell me the problem, I'd be grateful!
Your element use a class, not an id.
Change it for :
<div id="tb">Foo bar</div>
And :
#tb {
background: #2f2f2f;
}
If you wanna keep using a class, use this JS instead :
// Get all .tb elements
var tbs = document.getElementsByClassName('tb')
i = tbs.length;
// Loop
while(i--) {
// Change their background
tbs[i].style.backgroundColor = "#FFFFFF";
}
Or, if you are just interested by the first element :
document.getElementsByClassName('tb')[0].style.background = "#FFFFFF";
document.getElementsByClassName('tb')[0].style.background = "#FFFFFF";? Instead of backgroundColor? Either way, it still doesn't work...?
background or backgroundColor, whatever (I changed it to fit your original post).Cannot read property 'style' of undefined. I literally copied and pasted it..tb element in your document.The main problem here is that like zessx said, tb is apparently a class, not an ID (if I assume your CSS stylesheet is correct).
For your CSS stylesheet, when you're using the
.something {
}
syntax, the period means it's a class. ID's would be referred to by using
#something {
}
To see which one is actually going wrong, we'll probably need to see some more code where 'tb' is used.
And in the case that 'tb' is actually a class, you should potentially try using jQuery, where you can get elements of a certain class.
Check the below fiddle link
Here is your html code
<div id="tb"> </div>
Regards Maha
Yeah, as others have stated you're not referencing an id. Super quick fiddle to show you how to reference the class with js.
var a = document.getElementsByClassName('tb');
a[0].style.background = '#FFFFFF';
To get your element and change it style use document.getElementsByClassName('tb')[0].style.background = '#FFFFFF'. Fiddle: http://jsfiddle.net/vvRs2/.
if your css looks like this:
.tb {
background: #2f2f2f;
}
Than "tb" is a class( "." is the CSS selector for a class). What you need to do is make "tb" an id and than it will work.
Example: HTML:
<div id="tb">whatever</div>
CSS:
#tb {
background: #2f2f2f;
}
Or you can replace your JS with:
document.getElementByClassName('tb').style.background = '#FFFFFF';
but i would recommend the first method. Hope it helps.
.td != #td