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来引用该元素而不是您定义的函数。因此，当您尝试第二次调用showcontact()时，它不起作用，因为showcontact不再是函数。

在您编写JavaScript时，简单的修复实际上是一个全面的规则：

始终声明您的变量

这里还有第二个教训：

为变量提供描述性名称

虽然如果您提前声明showabout变量，您的代码仍然有效，但仍然会让您感到困惑。它显示的函数和元素应该有不同的名称。比如说，调用函数showAboutBox和它显示的框aboutBox。通过这种方式，无论是你还是语言，都没有混淆的空间 - 关于你所指的是什么。

javascript函数只工作一次

1 个答案:

始终声明您的变量

为变量提供描述性名称