Question

我是JavaScript的新手，在修改html文档中的图像方面遇到了问题。我知道为了更改图像，我需要更改img的src属性。

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

我的HTML

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

我的JavaScript

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

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

未捕获的TypeError：无法设置null的属性'src'

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

Answer 1

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

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

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

或者如果您更喜欢jQuery：

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

Answer 2

问题似乎是你在元素进入DOM之前执行你的脚本，因此null。

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

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

Answer 3

如果将外部脚本包含在文档的头部，则DOM将不会就绪，而document.getElementById（“photo”）将返回null。确保在结束标记之前包含脚本（出于性能原因的最佳实践）。

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

Answer 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= function() {
    var newPicLocation = "https://upload.wikimedia.org/wikipedia/commons/6/6a/Happy_face_ball.jpg";
    document.getElementById("photo").src = newPicLocation;
};

Answer 5

找不到ID为“photo”的元素。据推测，该元素尚未加载。

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

或使用jquery的$（文档）.ready

Answer 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'>";

有更改图像JavaScript的问题

6 个答案: