changing the background color from the external js.js

chickentulip · 08-10-2011, 03:36 PM

I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like:

<head>
<title> Basics Exercise</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form>
<p> Click this button and the document's color will change again </p>
<input name="button" type="button" value="Change the background color of the document"/>
</form>

js.js has

function changecolor() {
document.bgColor='#ea0d17';
}

document.forms[0].button.onClick=changecolor();

I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working.

DanInMa · 08-10-2011, 03:55 PM

I don't use the xhtml standard much myself, but I recall someone on this site mentioning that using the name attribute in xhtml has been deprecated, so perhaps if you referenced your targets by ID instead of name that would work?

devnull69 · 08-10-2011, 03:58 PM

name attributes are deprecated for forms(!) in xhtml. Normal form fields may and should still have names :-)

But: it is onclick and not onClick (case sensitive!) and it's changecolor and not changecolor()

Code:

document.forms[0].button.onclick=changecolor;

chickentulip · 08-10-2011, 04:18 PM

Thank very much for your responses. js is not an easy language to learn. Please help. My code still not working.

Devnull69-I changed the code as per your advice. but when I click the button -nothing happens.
DanInMa-referencing the button by Id -did not produce any result either.

the code looks like this:

<!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">
<head>
<title> Basics Exercise</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form>

<input name="button" type="button" value="Change the background color of the document"/>
</form>
</body>
</html>

js file

function changecolor() {
document.bgColor='#ea0d17';
}

document.forms[0].button.onclick=changecolor;

devnull69 · 08-10-2011, 04:21 PM

You changed the bgColor attribute for the document. What you wanted to do is: Change the CSS style background-color for the body element

Code:

function changecolor() {
   document.body.style.backgroundColor = '#ea0d17';
}

chickentulip · 08-10-2011, 04:40 PM

i have inserted the code into html document . still no result. Error console tool tell me that document.forms[0] is underfined for some reason

<!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">
<head>
<title> Basics Exercise</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
function changecolor() {
document.body.style.backgroundColor = '#ea0d17';
}
document.forms[0].button.onclick=changecolor;
</script>
</head>
<body>
<form action="">
<input name="button" type="button" value="Change the background color of the document"/>
</form>
</body>
</html>

devnull69 · 08-10-2011, 05:58 PM

Yes, because it doesn't exist yet. HTML will be processed top-down (including Javascript) and Javascript will immediately be executed. By that time the form doesn't exist yet, because its HTML code has not yet been processed.

Solution: Wait until page has been loaded

Code:

window.onload = function() {
   document.forms[0].button.onclick = changecolor;
};

chickentulip · 08-10-2011, 06:56 PM

Thank you!. I learned something new today