尝试用"let"替换"var"时未捕获的类型错误

Question

我收到以下代码片段的错误。

Uncaught TypeError: Cannot set property 'src' of undefined

我正在尝试使用"let"来声明一个变量。所以没有办法利用吊装。如果我在变量声明后声明函数，将再次引发另一个问题。请让我知道该怎么做？

<img id="imgMine" src = img.png> 
<script>
let myImg;
function explosion (){
myImg.src = "";//**<-- Uncaught TypeError: Cannot set property 'src' of undefined**
}
myImg= document.getElementById("imgMine").onclick = explosion();
</script>

Answer 1

您已将explosion()的返回值分配给myImg(以及document.getElementById("imgMine").onclick，但这并不真正相关(。

explosion没有return语句，因此返回undefined。

因此，"无法设置未定义的属性'src'"。

这与使用let而不是var完全无关。

---

看起来您正在尝试设置 image 元素的src属性。如果要执行此操作，则需要将图像元素分配给变量。

myImg = document.getElementById("imgMine");

---

您似乎还希望将explode函数分配为单击事件侦听器。为此，您需要分配函数本身，而不是调用函数的结果。失去().

myImg.onclick = explode;

或者你可以使用现代成语：

myImg.addEventListener("click", explode);

---

也就是说，图像不是设计为交互式控件的。虽然可以向其添加 click 事件处理程序，但它不会在辅助技术(如屏幕阅读器(中显示为可单击，也不会在没有指针设备的情况下导航(许多人通过页面中的交互元素按 Tab 键(。

简而言之，您正在做的事情非常难以接近(这可能会导致您的法律问题(。

您应该使用设计为可点击的元素，例如按钮。

let myImg;
function explosion() {
myImg.querySelector("img").src = "";
}
myImg = document.getElementById("imgMine");
myImg.addEventListener("click", explosion);

button {
border: 0;
background: transparent;
margin: 0;
padding: 0;
}

<button type="button" id="imgMine"><img src="https://placeimg.com/200/100/tech"></button>