我是Java语言的新手，所以如果这是一个非常愚蠢的问题，请原谅我。无论如何，我试图更改图像的来源，但是每次出现相同的错误消息“无法设置属性时，出现“ src”为空” 。
这是HTML：
<figure>
<img class="dist-pic" src="images/rock1.png" id="pic-id">
<figcaption>text</figcaption>
</figure>
稍后，在js文件中，我需要更改变量 distance 来显示警报或更改图片。但是，在这个问题上花费了几个小时之后，我无法弄清错误的根源：
var distance = 1;
if (distance == 0) {
alert('ALERT!');
} else if (distance == 1) {
var distPic = document.getElementById('pic-id');
distPic.src = 'images/rock2.png';
}
“无法设置null的属性'src'” 用于js代码的最后一行。我已经看了这么多的杂物，但我根本找不到错误。提前致谢！ <3
答案 0 :(得分：1)
只需将代码包装在DOMContentLoaded事件中即可确保HTML准备就绪。
// This ensures the HTML (DOM) is ready to work with.
document.addEventListener('DOMContentLoaded', () => {
var distance = 1;
if (distance == 0) {
alert('ALERT!');
} else if (distance == 1) {
var distPic = document.getElementById('pic-id');
distPic.src = 'images/rock2.png';
}
});<figure>
<img class="dist-pic" src="images/rock1.png" id="pic-id">
<figcaption>text</figcaption>
</figure>
答案 1 :(得分：1)
初学者经常犯的一个错误是学习何时执行代码以及何时执行代码。有多种方法可以决定何时执行代码。
A：块加载时。
浏览器在加载后将执行一段代码，因此介于<script>和</script>之间（无src属性）或使用{{1} }
有多种选择何时执行代码块的方法，这是DOM准备就绪后执行代码块的三种最常见的方法。
一种决定何时执行代码的方法是将所有HTML呈现完毕后的代码放在结束body标签之前。这样，您所有的html元素都将位于DOM中，并且可以使用。
<script src="..."></script>更流行的方法是在DOM完全加载后使用事件侦听器进行侦听。这将确保在回调时可以使用加载时要呈现的任何内容。可以将其放置在文档或外部脚本中的任何位置。 Source
<body>
<div>
<p>Hello</p>
</div>
<script>
// Your JavaScript here
</script>
</body>
运行代码的较新方法是使用延迟器，该方法仅在包含<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Your JavaScript Here
})
</script>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
的{{1}}标记上可用。这将告诉脚本在DOM渲染后加载。这还将确保像以前的方法一样加载DOM。 Source
script