Undefined Element ?

[Siberian]

var one = getElementsByClassName("orange")[0];
one.style.color = "orange";

The code above gives me the following error, why ?
Error: 'getElementsByClassName' was used before it was defined.

[Bob Hensley]

The function getElementsByClassName() needs to be called on a DOM object. Simply put- you need to tell it what it should be searching through. Very often this is the document. But you could limit its scope to a table, a DIV, etc. etc.

var one = document.getElementsByClassName('orange')[0];

[Siberian]

Ahh, damn :) Thanks :) Syntax Error :)

[nutandevjoshi]

But what is the correct answer?

[Siberian]

Nutandevjoshi - Add .document, to search the document.

[Bob Hensley]

But what is the correct answer?

Check my last post for a code example. As I explained, getElementsByClassName() is a function of all DOM elements. If you wish to learn more then I would encourage you to check out the MDN documentation on this function.

[Siberian]

It's the same method if instead of getting a class you got an id then you get the variable, and add the css rules, correct ?

[Bob Hensley]

It's the same method if instead of getting a class you got an id then you get the variable, and add the css rules, correct ?

You can search by ID as well. A nonsense example:

// can only return one, so no need for array index
var elem = document.getElementById('the_id');

elem.style.cssText = "color: #f00; font-weight: bold";

[Siberian]

This code look right to you ? It's not changing my background color to blue :(

var sour = getElementById('two');
sour.style = backgroundColor="blue";

[JorgeM]

Your code is not correct.

<div id="two">This is div2</div>

<script>
   var sour = document.getElementById('two');
   sour.style.backgroundColor="blue";
</script>

[Bob Hensley]

This code look right to you ? It's not changing my background color to blue :(

JorgeM has provided you with the appropriate code. But to explain the situation:

You have, once again, forgotten to use the method on a DOM element. What are you searching through? You're searching through the document, presumably. Thus your definition needs to read:

var sour = document.getElementById('two');

Second, your backgroundColor statement is just right out invalid. backgroundColor is a method of style, which is a method of a DOM element. As such, it needs to be written like so:

sour.style.backgroundColor = 'blue';

[Siberian]

I know, I fouled up. Food poisoning along a minor cold will cause this because of one cup of Hot Cocoa.
I wanted to overwrite the css.width with the with in the javascript, I've noticed this is not possible ?

[Bob Hensley]

I know, I fouled up. Food poisoning along a minor cold will cause this because of one cup of Hot Cocoa.
I wanted to overwrite the css.width with the with in the javascript, I've noticed this is not possible ?

You just want to set the element's width with JavaScript? This is very possible.

var sour = document.getElementById('two'),
  width = '500px',
  bgColor = 'blue';

sour.style.cssText = 'background-color: ' + bgColor + '; width: ' + width;

[Siberian]

I understand !

[Siberian]

document.getElementById("five").style.width="800px"+backgroundColor="black";
Sorry, how do you chain css styles in Js, concatenating with plus(+) doesn't work ?

[Bob Hensley]

document.getElementById("five").style.width="800px"+backgroundColor="black";
Sorry, how do you chain css styles in Js, concatenating with plus(+) doesn't work ?

You can't chain by accessing the CSS properties via the style object. You either need to modify them seperately, or all at once via cssText.

// Separately
elem.style.width = '800px';
elem.style.backgroundColor = 'blue';

// cssText
elem.style.cssText = 'width: 800px; background-color: blue';

[Siberian]

Ah ! Thanks for the help :)