Using Javascript to modify css

Hey I'm learning to code Javascript and following an example in a book that shows how to change CSS properties using Javascript.

(I know this is bad practise but just for argument's sake can someone show me where I'm going wrong?)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Javascript course" />
	<meta name="keywords" content="Javascript" />
	<meta name="language" content="English" />
	

	<title>Testing Javascript</title>
<style>
#div2 {
	border-style:solid;
	border-width: 1px;
	border-color: #000000;
}
</style>
</head>
<body>

<div id="div1">
This is div 1
</div>
<div id="div2">
This is div 2
</div>
<script language="javascript" type="text/javascript">
	var d1 = document.getElementById("div1");
	var d2 = document.getElementbyId("div2");
	d1.style.backgroundColor = "#00ff0a";
</script>
</body>
</html>

Open in new window

j2isndhuAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
That's not necessary. The only reason it does not work is because of a typo.

getElementbyId

Should be

getElementById
0
 
YZlatCommented:
your <script> tag should be in <head> section fo your page
0
 
YZlatCommented:
Actually no. Looks like it is not working because the code is called before page elements have loaded. Add this code to onLoad event of the page
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
YZlatConnect With a Mentor Commented:
try this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Javascript course" />
	<meta name="keywords" content="Javascript" />
	<meta name="language" content="English" />
	<script language="javascript" type="text/javascript">
function test()
{
	var d1 = document.getElementById('div1');
	var d2 = document.getElementById('div2');
	
	d1.style.backgroundColor = "#00ff0a";
}
</script>

	<title>Testing Javascript</title>
<style>
#div2 {
	border-style:solid;
	border-width: 1px;
	border-color: #000000;
}
</style>
</head>
<body onLoad="test();">

<input type='text' id='myText' />

<div id="div1">
This is div 1
</div>
<div id="div2">
This is div 2
</div>

</body>
</html> 

Open in new window

0
 
YZlatCommented:
all i did was put your javascript code inside a function and then call the function from body onLoad event
0
 
YZlatCommented:
oops, please remove

<input type='text' id='myText' />


I added it for test purposes
0
 
Tom BeckCommented:
By simply putting the code at the bottom of the body it will execute AFTER the elements are rendered on the page. There's nothing wrong with doing it that way. Why add unnecessary complexity, especially for someone trying to learn.
0
 
j2isndhuAuthor Commented:
Hey thanks YZlat that worked, I will watch the order that the code is called.
A lot of this book seems to have examples that don't work. Throwing it out, thanks again!
0
 
Tom BeckCommented:
Unbelievable!
0
 
j2isndhuAuthor Commented:
Sorry tommyBoy! I can see the typo now, I will amend the points as both solutions were in fact correct.
0
 
Tom BeckCommented:
No problem, the points are a trivial thing.

Both solutions were correct as both included the corrected typo. Creating a function and calling it on page load seems to me like a lot of unnecessary code just to force the the placement of the script into the head section. Since you are in a learning phase I wanted to point out that there's no rule that says javascript has to be in the head. It appears that @YZlat and I differ on that however. Still, what @YZlat demonstrated is a valuable technique with many applications.
0
 
j2isndhuAuthor Commented:
Thanks guys for the pointers!
0
All Courses

From novice to tech pro — start learning today.