javascript functions only working once

Question

I have these two javascript functions that change a background and show and hide fields, however it only works once for each button

function showabout(){


        hidecontact = document.getElementById("contactus");

        hidecontact.style.display = "none";


        hide.style.backgroundImage = "url(aboutus.jpg)";


        showabout = document.getElementById("aboutus");
        showabout.style.display = "inline";
        showabout.style.cssFloat = "left";
        secbuttons.style.paddingLeft = "670px";




        }

        function showcontact(){


        hideabout = document.getElementById("aboutus");
        hideabout.style.display = "none";   


        hide.style.backgroundImage = "url(contact.jpg)";


        showcontact = document.getElementById("contactus");
        showcontact.style.display = "inline";
        showcontact.style.cssFloat = "left";
        secbuttons.style.paddingLeft = "670px";




        }


   <font color="#33FF66"><h2 style="cursor:pointer" onmouseover = "showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font>

<font color="#33FF66"><h2 style="cursor:pointer" onclick="showcontact()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font><br />

<font color="#33FF66"><h2 style="cursor:pointer" onmouseover = "showcontact()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font>

The three H2s are the lines causing the errors. It says "uncaught type error, object is not a function".

Can you provide sample HTML code. B,coz I think that there is a n issue of ID , or maybe your browser does not support it completely. — Ankit
– Ankit, Commented May 12, 2011 at 4:45
added html code, I've tried numerous browsers and get the same error. — user541597
– user541597, Commented May 12, 2011 at 4:53
JS stop working usually means you've got JS errors stopping the action. I suspect hide... is a problem (there's no such thing defined) as well as secbuttons (not defined). You may have defined them elsewhere, but we can't tell without a full example (of the smallest example that fails). Also, run it in Firefox or Chrome with the JS console on, and let us know if any errors pop up. — AlexanderJohannesen
– AlexanderJohannesen, Commented May 12, 2011 at 5:01

Chuck · Accepted Answer · 2011-05-12 05:21:34Z

Your problem is that you're redefining showabout and showcontact — your functions — to refer to HTML elements.

These two code snippets:

function showabout() {
    ...
}

and

showabout = document.getElementById("aboutus");

both set the variable window.showabout. The first one assigns a function to window.showabout, and the latter assigns an HTML element to window.showabout.

Because you don't use the var keyword to declare the variables in your functions, showabout = document.getElementById("aboutus") reassigns showcontact to refer to that element instead of the function you're defining. So then when you try to call showcontact() a second time, it doesn't work because showcontact is no longer a function.

The easy fix is actually an all-around good rule whenever you're writing JavaScript:

Always declare your variables

There's also a second lesson here:

Give your variables descriptive names

Although your code will work if you just declare the showabout variable ahead of time, it will still be confusing to read. The function and the element it shows should have different names. Say, call the function showAboutBox and the box it shows aboutBox. This way there's no room for confusion — either by you or the language — about which thing you're referring to.

Collectives™ on Stack Overflow

javascript functions only working once

1 Answer 1

Always declare your variables

Give your variables descriptive names

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Always declare your variables

Give your variables descriptive names

Comments

Your Answer

Sign up or log in

Post as a guest

Related