What's wrong with this javascript?

chabsey · 29-11-2005 9:55am #1

I'm trying to show and hide a layer based on a click. The previous script didn't work in Firefox, this new version doesn't work in any browser! What's wrong with it?!

function toggleVisibility(me) {
var object = document.getElementById(me);
state = object.style.visibility;
if (state == "hidden"){
object.style.visibility ="visible";
image_text.innerText="Hide Images";
}
else {
object.style.visibility ="hidden";
image_text.innerText="Show Images";
}
}

Thanks.

Eoin · 29-11-2005 10:46am

How are you invoking the JScript function? works fine for me in IE and Firefox using the code like this:

[HTML]<html>
<head>
<title>test</title>
</head>
<script type="text/JavaScript">
function toggleVisibility(me)
{
var object = document.getElementById(me);
state = object.style.visibility;
if (state == "hidden")
{
object.style.visibility ="visible";
image_text.innerText="Hide Images";
}
else
{
object.style.visibility ="hidden";
image_text.innerText="Show Images";
}
}
</script>
<body>
<div id="theDiv">Some Text</div>
<input type="button" onClick="toggleVisibility('theDiv')" value="Hide Images" id="image_text">
</body>
</html>[/HTML]

chabsey · 29-11-2005 11:15am

eoin_s wrote:

How are you invoking the JScript function? works fine for me in IE and Firefox using the code like this:

This is the invocation:

<a href="javascript:toggleVisibility('CarPhoto')"><span id="image_text" >Hide
Images</span></a>

Still doesn't work. I presume it's something to do with me not using a button?

Eoin · 29-11-2005 11:20am

chabsey wrote:

This is the invocation:

<a href="javascript:toggleVisibility('CarPhoto')"><span id="image_text" >Hide
Images</span></a>

Still doesn't work. I presume it's something to do with me not using a button?

I don't think it's to do with a button. You are sending "CarPhoto" in as the object to get the style of, but where is that object specified?

chabsey · 29-11-2005 11:22am

eoin_s wrote:

I don't think it's to do with a button. You are sending "CarPhoto" in as the object to get the style of, but where is that object specified?

Just above the togglevisibility, this div is set :

<div id="CarPhoto" >
PHOTO HERE
</div>

And in the CSS it is declared as:

#CarPhoto {
float:right;
margin-left: 5px;
padding: 2px;
background: #F0F0F0;
}

Eoin · 29-11-2005 11:51am

Try this - I changed it so instead of using an ID in the css, I used two classnames instead

[HTML]<html>
<head>
<title>test</title>
</head>
<script type="text/JavaScript">
function toggleVisibility(me)
{
var sClass = document.getElementById(me).className;

if (sClass == "ShowCarPhoto")
{
document.getElementById(me).className = "HideCarPhoto";
document.getElementById("image_text").innerHTML ="Show Images";
}
else
{
document.getElementById(me).className = "ShowCarPhoto";
document.getElementById("image_text").innerHTML ="Hide Images";
}
}
</script>
<style type="text/css">
.ShowCarPhoto
{
float:right;
margin-left: 5px;
padding: 2px;
background: #F0F0F0;
visibility: visible;
}
.HideCarPhoto
{
visibility: hidden;
}
</style>
<body>
<a href="javaScript: toggleVisibility('CarPhoto')"><div id="image_text">Hide Images</div></a>

<div class="ShowCarPhoto" id="CarPhoto">
PHOTO HERE
</div>
</body>
</html>[/HTML]

mewso · 29-11-2005 9:10pm

The problem may be with the javascript call in the href. You could add ";return false" to the end or change it to href="#" onclick="javascript..."

Eoin · 01-12-2005 10:48am

OP - how did you get on?

chabsey · 01-12-2005 5:18pm

eoin_s wrote:

OP - how did you get on?

Still didn't work for me. I've ended up using a version that works in IE but not in Firefox. Baffles me what I was doing wrong.

Eoin · 01-12-2005 5:52pm

chabsey wrote:

Still didn't work for me. I've ended up using a version that works in IE but not in Firefox. Baffles me what I was doing wrong.

unless you post your HTML, not much we can help you with - I could only include the snippets you posted.

What's wrong with this javascript?

Comments