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的框。 這樣，就不會因為您或您的語言而對您指的是什么感到困惑。