更改图像 javascript 时遇到问题答案

【问题标题】：Having problems with changing image javascript更改图像 javascript 时遇到问题
【发布时间】：2013-07-23 20:19:05
【问题描述】：

我是 JavaScript 新手，在更改我的 html 文档上的图像时遇到问题。我知道为了改变图片，我需要改变img的src属性。

我有一个名为“magenta.jpg”的图像，我想在页面加载后立即将其替换为“fuschia.jpg”。

我的 HTML

<img src="magenta.jpg" name="photo" id="photo">

我的 JavaScript

document.getElementById("photo").src = "fuschia.jpg";

当我尝试这样做时，我收到一条错误消息：

未捕获的类型错误：无法设置属性 'src' of null

能否请您帮助我了解代码出了什么问题，以及如何修复它？

【问题讨论】：

你的脚本在哪里？它必须在 DOM 准备好后执行。一个解决方案是把它放在身体的末端。
这是一个名为“script.js”的单独的 javascript 文件。我希望它在语义上保持这种状态。
如果你在页面的 head 部分包含该文件，它会在元素出现之前执行
好的，我现在明白问题所在了。但是如果我真的想保留一个单独的 javascript 文件，我该怎么办？
在结束正文标记之前包含文件

标签： javascript debugging

【解决方案1】：

它在加载 DOM 之前执行。要解决此问题，您可以将 <script> 移动到文档底部或

在您的 .js 文件中：
¯¯¯¯¯¯¯¯¯¯¯¯¯¯

window.onload = function(){
    document.getElementById("photo").src = "fuschia.jpg";
}

或者如果你喜欢jQuery:

$(function(){
    $("#photo").attr("src", "fuschia.jpg");
});

【讨论】：

【解决方案2】：

问题似乎是您在元素位于 DOM 之前执行脚本，因此是 null。

如果您想将脚本保存在单独的文件中，您可以在加载时调用您的代码：

window.onload = function(){
    document.getElementById("photo").src = "fuschia.jpg";
}

【讨论】：

【解决方案3】：

如果您在文档的头部包含外部脚本，那么 DOM 将不会准备好并且您的 document.getElementById("photo") 将返回 null。确保在结束标记之前包含脚本（出于性能原因的最佳做法）。

<script src="yourfile.js"></script>
</body>

【讨论】：

【解决方案4】：

This 是更改包含快乐宝宝的照片的工作示例。

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/32/A_photo_of_an_8.5-week-old_baby_smiling.jpg/480px-A_photo_of_an_8.5-week-old_baby_smiling.jpg" name="photo" id="photo">
<input type="button" value="Click To Change" onclick="ChangePhoto();"/>

var ChangePhoto=函数（）{ var newPicLocation = "https://upload.wikimedia.org/wikipedia/commons/6/6a/Happy_face_ball.jpg"; document.getElementById("照片").src = newPicLocation; };

【讨论】：

【解决方案5】：

它找不到 ID 为“照片”的元素。大概该元素尚未加载。

有关此问题的更多信息，请查看以下问题：
How to check if an embedded SVG document is loaded in an html page?
$(document).ready equivalent without jQuery

或者使用jquery的$(document).ready

【讨论】：

【解决方案6】：

您可以使用嵌入您的代码的代码，它的工作原理！

在html文件中

<div id="photo">
     <img src="magenta.jpg" name="photo">
</div>

在javascript文件中

var temp= document.getElementById("photo");
temp.innerHTML=" <img name="photo" src='fuschia.jpg'>";

【讨论】：