Javascript Problem

BeatMaster · 1 Dec 2006 at 21:33

I'm trying to work out why it won't allow the same thing but a different way.

I'm trying to build up so that I have a function or a set of functions that allow a set of div's to appear and disappear.

i.e.

You click on A
A appears
You click on B
A disappears, B appears

This works:

div.show { display: block; background-color: blue; }

function showhide2 (id, className) {
document.getElementById (id).className = className;
}

<a href="#" onclick="showhide2 ('div1', 'show');" >Hide 1</a>

However...

I tried to move onto step 2 of creating this idea and it broke :mad:

<a href="#" onclick="showhide ('div1');">A</a>

var state = 'show';
function showhide (id) {
document.getElementById (id).state = state;
}

I can't understand whats different from passing the word show from the link or getting it from the variable state.

Any help greatly appreciated!

BeatMaster

Eriedor · 2 Dec 2006 at 00:47

BeatMaster said:
var state = 'show';
function showhide (id) {
document.getElementById (id).state = state;
}

try

Code:

var state = 'show';
function showhide (id) {
    var obj = document.getElementById (id);
    obj.style.display=state;
}

BeatMaster · 2 Dec 2006 at 09:33

Still doesn't seem to want to play

Code:

<!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>
</head>
<style type="text/css">
div.show { display: block; background-color: blue;  }
div.hide { display: none;  background-color: white; }
</style>
<script language="javascript">
var lastDiv;
var state = 'show';
function showhide (id) {
    var obj = document.getElementById (id);
    obj.style.display=state;
}

function showhide2 (id, className) {
  document.getElementById (id).className = className;
}

</script>
<body>
<a href="#" onclick="showhide ('div1');">A</a>
<a href="#" onclick="showhide ('div2');">B</a>
<a href="#" onclick="showhide2 ('div1', 'show');"  >Hide 1</a>


<div id="div1"><p>Hey</p></div>
<div id="div2"><p>Hi</p></div>
</body>	
</html>

I can't understand why it doesn't either, everything appears to be right :confused:

BeatMaster

Sic · 2 Dec 2006 at 10:30

someone asked a similar question a couple of weeks ago. the reason i dont think yours is working is because you're not denoting a style in showhide2. have a look at this, see if it does what you want