Solved

Using Javascript to modify css

Posted on 2013-01-22
14
266 Views
Last Modified: 2013-01-22
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

0
Comment
Question by:j2isndhu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
14 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 38806152
your <script> tag should be in <head> section fo your page
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 250 total points
ID: 38806161
That's not necessary. The only reason it does not work is because of a typo.

getElementbyId

Should be

getElementById
0
 
LVL 35

Expert Comment

by:YZlat
ID: 38806224
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 35

Assisted Solution

by:YZlat
YZlat earned 250 total points
ID: 38806227
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
 
LVL 35

Expert Comment

by:YZlat
ID: 38806233
all i did was put your javascript code inside a function and then call the function from body onLoad event
0
 
LVL 35

Expert Comment

by:YZlat
ID: 38806237
oops, please remove

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


I added it for test purposes
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38806270
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
 

Author Comment

by:j2isndhu
ID: 38806413
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38806420
Unbelievable!
0
 

Author Comment

by:j2isndhu
ID: 38806473
Sorry tommyBoy! I can see the typo now, I will amend the points as both solutions were in fact correct.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38806574
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
 
LVL 35

Expert Comment

by:YZlat
ID: 38806590
0
 

Author Comment

by:j2isndhu
ID: 38806607
Thanks guys for the pointers!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question