javascript函数只能运行一次

Question

我有这两个javascript函数，它们可以更改背景以及显示和隐藏字段，但是每个按钮只能使用一次

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>

三个H2是导致错误的行。 它说“未捕获的类型错误，对象不是函数”。

Answer 1

您的问题是您要重新定义showabout和showcontact （您的函数）以引用HTML元素。

这两个代码段：

function showabout() {
    ...
}

和

showabout = document.getElementById("aboutus");

都设置变量window.showabout 。 第一个将函数分配给window.showabout ，第二个将HTML元素分配给window.showabout 。

因为您没有使用var关键字在函数中声明变量， showabout = document.getElementById("aboutus") showcontact showabout = document.getElementById("aboutus")重新分配showcontact来引用该元素，而不是您要定义的函数。 因此，当您尝试第二次调用showcontact()时，它将不起作用，因为showcontact不再是一个函数。

无论何时编写JavaScript，简单的修复实际上都是一个很好的规则：

始终声明变量

这里还有第二课：

给变量起描述性的名字

尽管如果您只是提前声明showabout变量，代码就可以工作，但是它仍然使阅读时感到困惑。 该函数及其显示的元素应具有不同的名称。 说，调用函数showAboutBox及其显示aboutBox的框。 这样，就不会因为您或您的语言而对您指的是什么感到困惑。