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