Cannot set property 'display' of undefined【利用Chrome瀏覽器檢視js語法錯誤】
阿新 • • 發佈:2019-02-18
想要實現一個簡單的功能:
預設隱藏一個div,點選後顯示,並可以切換,如下圖所示:
就是這麼簡單的一個問題,還是報錯了。哦,對了,以前不知道怎麼解決前端的問題,一碰到錯誤就懵了。有必要分享下找前端錯誤的一條經驗:
如果用到了jquery,尤其是點選效果,點選後無反應時,第一個要想到的是:“是否有語法錯誤”!
由於一般IDE都不會自動檢查js語法,所以得交給瀏覽器完成。在Chrome瀏覽器下,點右鍵檢查,比如我在“顯示輸入的URL”這裡用到了jquery,但是點了後沒反應,右上角明顯有錯誤出現,看下錯誤詳情。
我的實現程式碼如下:
$("#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"); } });
問題解決!細心啊!我的天!