-1

我是 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”设置为 null

你能帮我理解代码出了什么问题，以及如何解决它吗？

4

6 回答 6

5

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

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

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

或者，如果您更喜欢jQuery：

$(function(){
    $("#photo").attr("src", "fuschia.jpg");
});
于 2013-07-23T20:23:15.437 回答
2

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

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

window.onload = function(){
    document.getElementById("photo").src = "fuschia.jpg";
}
于 2013-07-23T20:23:01.733 回答
1

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

<script src="yourfile.js"></script>
</body>
于 2013-07-23T20:24:51.537 回答
1

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

<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;
};

于 2013-07-23T20:28:31.920 回答
0

您可以使用与您的代码无关的代码，它的工作！

在 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'>";
于 2013-07-23T20:47:32.530 回答
0

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

有关该检查这些问题的更多信息：
如何检查嵌入的 SVG 文档是否加载到 html 页面中？
$(document).ready 没有 jQuery 的等价物

或使用 jquery 的 $(document).ready

于 2013-07-23T20:24:54.793 回答