有更改图像JavaScript的问题

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