1
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.

4
Contributors
16
Replies
45
Views
3 Years
Discussion Span
Last Post by Siberian
1

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];

0

Nutandevjoshi - Add .document, to search the document.

Edited by Siberian

0

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 ?

0

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";
0

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

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

Your code is not correct.

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

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

Edited by JorgeM

0

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';

0

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 ?

0

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;
0

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

0

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';
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.