3 replies [Last post]
dismorfo
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2004-12-28
Posts: 4
Points: 0

I'm trying to use a onclick method to make a element visible o hidden and it works ok when I make a test without the <!DOCTYPE> but when I use any of the <!DOCTYPE> the script don't work. I'm asking here because the I think that the "<!DOCTYPE>" its part of using CSS correctly. I really need to use the <!DOCTYPE> because I'm working under a web content management and I can't change the <head>. Somebody can tell me what I'm making wrong? its anyway to make this work using a <!DOCTYPE> or if this is not the correct forum to ask this where can I ask?.

The example of the code:

<script type="text/javascript">
//Switch elements visible or hidden
function A() {
a.style.visibility = 'visible';
b.style.visibility = 'hidden';
}
function B() {
a.style.visibility = 'hidden';
b.style.visibility = 'visible';
}
</script>
<input type="radio" name="ticket" onclick="A()">
<input type="radio" name="ticket" onclick="B()">
<div id="a" name="a" style="position: absolute; visibility : hidden; top : 40px; right : 5px;">X</div>
<div id="b" name="b" style="position: absolute; visibility : hidden; top : 40px; right : 5px;">X</div>

Tags:
antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 10 years 36 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quo

There are some errors in your code. Also, you should post in 'off topic' with any javascript questions.

1) You need to surround any input elements with a form.
2) The <div> element should not contain a name attribute.
3) For scalability, flexibility, and speed, you should remove the inline style attribute from any element and use external css (for this example i moved the CSS to the top of the page between <head></head).
4) The correct way to change the value of an element's attribute is to do it with document.getElementById("someId") to assure the correct behavior in any modern browser.

Here is the reworked code. I changed the position of your divs for clearer readability while testing. You can easily change them back to the way they were. You shouldn't have put the doctype in question in your subject line as most of it got cut off. However, this shouldn't matter; my code should get you no problems under the rule of any doctype.

Andrew

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#a, #b { position: absolute; visibility : hidden; top : 40px; left : 5px; }
</style>
<script type="text/javascript">
//Switch elements visible or hidden
function A() {
document.getElementById("a").style.visibility = 'visible';
document.getElementById("b").style.visibility = 'hidden';
}
function B() {
document.getElementById("a").style.visibility = 'hidden';
document.getElementById("b").style.visibility = 'visible';
}
</script>
</head>
<body>
<form action="" name="theform" method="post">
  <input type="radio" name="ticket" onclick="A()" />
  <input type="radio" name="ticket" onclick="B()" />
</form>
<div id="a">X</div>
<div id="b">Y</div>
</body>
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quo

Moved to 'Off Topic'

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dismorfo
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2004-12-28
Posts: 4
Points: 0

Thanks

hey Thank, that help me out