Cannot set property 'display' of undefined【利用Chrome瀏覽器查看js語法錯誤】

想要實現一個簡單的功能：

默認隱藏一個div，點擊後顯示，並可以切換，如下圖所示：

就是這麼簡單的一個問題，還是報錯了。哦，對了，以前不知道怎麼解決前端的問題，一碰到錯誤就懵了。有必要分享下找前端錯誤的一條經驗：

如果用到了jquery，尤其是點擊效果，點擊後無反應時，第一個要想到的是：“是否有語法錯誤”！

由於一般IDE都不會自動檢查js語法，所以得交給瀏覽器完成。在Chrome瀏覽器下，點右鍵檢查，比如我在“顯示輸入的URL”這裏用到了jquery，但是點了後沒反應，右上角明顯有錯誤出現，看下錯誤詳情。

這個問題很隱晦，參考stackoverflow中的這個問題。

我的實現代碼如下：

$("#switchUrl").click(function(){
        var status = $(".showTable").style.display;
        $("#show_url").toggle();
        if (status == 'none') {
            $("#switchUrl").text("隱藏輸入的URL");
        } else {
            $("#switchUrl").text("顯示輸入的URL");
        }

    });

.showTable可以看出這是想通過class取到div，但是注意，不同div可以對應相同的class。所以必須考慮到這樣的情況：一個頁面叫同一個class名字的會有很多，這樣獲取到的就是一個數組形式，我還必需指定我取數組中的哪一個，必需加上索引才行。（應該考慮我這樣取是不是本身也容易出問題）修改後如下：

$("#switchUrl").click(function(){
        var status = $(".showTable")[0].style.display;
        $("#show_url").toggle();
        if (status == 'none') {
            $("#switchUrl").text("隱藏輸入的URL");
        } else {
            $("#switchUrl").text("顯示輸入的URL");
        }

    });

問題解決！細心啊！我的天!

github