Why is this css code not working

pineappelle

02-02-2012, 05:28 AM

why arent both buttons changing and why isnt the color of the text changing

<html>
<head>
<title>Testing</title>

<style type="text/css">

#submit {
width: 200px;
height: 75px;
background-color: black;
color: gray;
text-align: center;
line-height: 75px;
font-size: 50px;
border: 5px solid red;
position: absolute;
}

#submit:hover {
background-color: gray;
color: black;
border: 5px solid yellow;
text-decoration: underline;
cursor: pointer;
}

body {
background-color: black;
}

#picture {
visibility: hidden;
position: absolute;
top: 150px;
}

a:left

</style>

<script type="text/javascript">

function show() {
document.getElementById('body').style.backgroundImage = 'url(http://www.boallen.com/assets/images/randbitmap_true.png)';
document.getElementById('submit').style.backgroundImage = 'url(http://www.ysb.on.ca/uploads/images/feature%20stories,%20other%20web

%20text/Rainbow_Ocean__by_Thelma1.jpg)';
document.getElementbyId('submit').style.color = 'black';
}

function hide() {
document.getElementById('body').style.backgroundImage = 'none';
document.getElementById('submit').style.backgroundImage = 'none';
}

</script>

</head>
<body id="body">

<div id="submit" onClick="show();">
Change
</div>

<div id="submit" onClick="hide();" style="left: 250px;">
Original
</div>

<br>
<br>
<br>

<div id="picture">
<img src="http://www.boallen.com/assets/images/randbitmap_true.png">
</div>

</body>
</html>

wolfcry044

02-02-2012, 01:29 PM

Try using color codes instead of the names of the colors:
http://www.december.com/html/spec/colorhex.html

Rowsdower!

02-02-2012, 01:48 PM

Using hex codes for colors is a good idea, but it won't fix your problem. You have a number of issues here:

You do not have a valid doctype in your HTML (use the HTML Validator (http://validator.w3.org/))
You have more than one item in the page using the same ID (this problem is compounded by your javascript, which attempts to call two items by the same ID to change their style - this will never work)
You have javascript errors
You have an invalid a:left bit of text in your CSS that isn't doing anything at all.

I'm not sure exactly what you're going for, but this is a cleaner step toward usable code:

<!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" lang="en">
<head>
<title>Testing</title>
<style type="text/css">
#submit,#submit1{
width:200px;
height:75px;
background-color:black;
color:gray;
text-align:center;
line-height:75px;
font-size:50px;
border:5px solid red;
position:absolute;
}
#submit:hover,#submit1:hover{
background-color:gray;
color:black;
border:5px solid yellow;
text-decoration:underline;
cursor:pointer;
}
body{
background-color:black;
}
#picture{
visibility:hidden;
position:absolute;
top:150px;
}
</style>
<script type="text/javascript">
function show() {
document.getElementById('body').style.backgroundImage = 'url(/randbitmap_true.png)';
document.getElementById('submit').style.backgroundImage = 'url(/Rainbow_Ocean__by_Thelma1.jpg)';
document.getElementById('submit').style.color = 'black';
document.getElementById('submit1').style.backgroundImage = 'url(/Rainbow_Ocean__by_Thelma1.jpg)';
document.getElementById('submit1').style.color = 'black';
}
function hide() {
document.getElementById('body').style.backgroundImage = 'none';
document.getElementById('submit').style.backgroundImage = 'none';
document.getElementById('submit1').style.backgroundImage = 'none';
}
</script>
</head>
<body id="body">
<div>
<div id="submit" onclick="show();">Change</div>
<div id="submit1" onclick="hide();" style="left:250px;">Original</div>
<br />
<br />
<br />
<div id="picture"><img src="/randbitmap_true.png" alt="" /></div>
</div>
</body>
</html>