PDA

Click to See Complete Forum and Search --> : CSS+JavaScript+Netscape=problems

BestZest
12-24-2003, 11:12 AM
Im having trouble trying to get JavaScript to set CSS values in Netscape 7.1. Here's my code:

function viewCol(colour) {
document.getElementById("view").style.background=colour
document.forms[0].hex.value=colour
}

'colour' would be a hex value (#FFFFFF). Neither 'view' nor 'hex' has their colour, value set. I would have expected the value setting to work but it doesn't. I've had trouble with CSS and Netscape in the past. I wonder if anyone could help me with this problem, and maybe explain how Netscape handles styles and Javascript

Thanks, BestZest
fredmv
12-24-2003, 11:22 AM
That should work just fine. Could we see the HTML you're using as well?
BestZest
12-24-2003, 11:26 AM
Sorry here you go:


<script language="javascript" src="colour.js"></script>
<input type="text" name="view" READONLY><br>
<input type="text" name="hex">


'view' is a text box with readonly status, and the script should change the background colour of it. I forget to mention that the javascript code is in a seperate .js file, might this cause any problems do you think?

BestZest
Merry Chrimbo!!!
fredmv
12-24-2003, 11:38 AM
Two things you should be taking note of here: In your JavaScript, you're referring to document.forms[0], this means the first <form> element in the page. Therefore, you should have a <form> element wrapping around those two <input> elements otherwise that is an invalid reference to that field. You're using the document.getElementById DOM method, but there is no element with an id that matches the string you specify; the only element that has a name that related to is one of the <input> fields — but that's the name attribute — the document.getElementById DOM method returns a reference to an object based on it's id, as its name implies!Therefore, your code will work correctly if written like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function viewCol(c)
{
document.getElementById("view").style.background = c;
document.forms[0][0].value = c;
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
input {
display: block;
}
/*]]>*/
</style>
</head>

<body>
<form action="#">
<div>
<input type="text" name="hex" />
<input type="text" id="view" readonly="readonly" />
<ul>
<li><a href="#" onclick="viewCol('#990000');">Red</a></li>
<li><a href="#" onclick="viewCol('#009900');">Green</a></li>
<li><a href="#" onclick="viewCol('#000099');">Blue</a></li>
</ul>
</div>
</form>
</body>
</html>