Using Javascript with CSS and DOM

**Novice2010** · Sep 26, 2010 14:10

Hello everyone,

This is a practice script and is not meant for real world use.

I can't get this to work. The code is suppose to change the background color of the div tag.

Any ideas?

Code:

<script type="text/javascript">
<!--
function changeColor(){
	var divTag = document.getElementsById("div");
	for (var counter = 0; counter < divTag.lenght; counter++){
		divTag[counter].style.background = "#FF0000";
	}
}
//-->
</script>
</head>

<body>
<div style="width: 200px; height: 200px;">I love soupterines</div>
<input type="button" value="Change Color" onclick="changeColor()" />
</body>

Thanks!!

Novice2010

**Raffles** · Sep 26, 2010 14:41

It doesn't work because you haven't given the DIV an id. Also, it's document.getElementById - note the spelling.

You have a spelling mistake in the for loop - look at your spelling of length. But that is not relevant, because you don't need a for loop at all. getElementById will only return one tag. This is because the id is supposed to be unique - only one element can have a single id.

**AllanP** · Sep 26, 2010 16:42

This one might help you with other possibilities. It toggles the colour as you click on the button.

<html>

<head>

<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>

<body>

<div id="div1">
<p class="a18B">I love soupterines
</div>

<p><input type="button" value="Change Color" onclick="changeColor()"></p>

</body>

</html>

**Novice2010** · Sep 26, 2010 19:30

Originally Posted by Raffles

It doesn't work because you haven't given the DIV an id. Also, it's document.getElementById - note the spelling.

You have a spelling mistake in the for loop - look at your spelling of length. But that is not relevant, because you don't need a for loop at all. getElementById will only return one tag. This is because the id is supposed to be unique - only one element can have a single id.

Thanks for pointing that out and sorry for the confusion, I originally had document.getElementsByTagName. But change it to ID when that wasn't working before posting the script.

Thanks again.

Novice

**Novice2010** · Sep 26, 2010 19:31

Originally Posted by AllanP

This one might help you with other possibilities. It toggles the colour as you click on the button.

<html>

<head>

<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>

<body>

<div id="div1">
<p class="a18B">I love soupterines
</div>

<p><input type="button" value="Change Color" onclick="changeColor()"></p>

</body>

</html>

Thanks for the contribution!!

I'll mess around with it.

Nov

User Tag List

Thread: Using Javascript with CSS and DOM

Thread Tools

Display

Using Javascript with CSS and DOM

Bookmarks

Bookmarks

Posting Permissions