html部分代碼:
?
JS部分代碼:
需要實現的效果:點擊圖片,來回相互切換。
我開始的錯誤做法:代碼如上圖所示(邏輯上看起來是沒有錯誤的)
嘗試過程:把JS代碼放在</body>閉合標簽之前運行是沒有問題的,單獨寫在JS代碼文件中,從head標簽內引入JS文本,報錯Uncaught TypeError: Cannot set property 'onclick' of null
最終解決方案:將JS代碼放入window.onload = function(){.........}中,head標簽內引入JS文本,便可以正確運行。O(∩_∩)O
第二種方法:如上文嘗試過程中提到的,將JS代碼寫在</body>標簽之前
總結:如果把js直接寫在head標簽之內或者寫成單獨JS文件從head標簽引入,瀏覽器則先執行JS代碼,后加載頁面,因此報錯Uncaught TypeError: Cannot set property 'onclick' of null.將JS代碼寫在</body>標簽之前或者寫在window.load = function(){....}中引入html頁面,則先加載頁面,后執行JS代碼,代碼則會正常運行。