更改图像时出现问题javascript

-1

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

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

我的HTML

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

我的JavaScript

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

当我尝试这样做，我得到一个错误，指出：

Uncaught TypeError: Cannot set property 'src' of null

能否请你帮我明白了什么是错误的代码，以及如何解决它？

来源

2013-07-23 antigravityguy

哪里是你的脚本？它必须在DOM准备好后执行。一个解决方案是把它放在身体的尽头。 –

这是一个名为“script.js”的单独的JavaScript文件。我希望它保持这种语义的方式。 – antigravityguy

如果将该文件包含在页面的头部分中，那么即使有元素也会执行它 – adeneo

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

如果你想保持剧本在一个单独的文件，你可以叫上你的负载代码：

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

来源

2013-07-23 20:23:01

谢谢！这件作品 – antigravityguy

它执行DOM加载之前。为了解决这个问题，你可以移动<script>到文档的底部或

您的.js文件里面：
¯¯¯¯¯¯¯¯¯¯¯¯¯¯

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

或者如果你喜欢jQuery：

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

来源

2013-07-23 20:23:15

很漂亮。这工作完美。 – antigravityguy

如果您在您的文档的头你的外部脚本，那么DOM将不准备和你的document.getElementById（“照片”）将返回null。确保在结束标记之前包含脚本（出于性能原因的最佳实践）。

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

来源

2013-07-23 20:24:51 Fotiman

它无法找到ID为“photo”的元素。据推测该元素尚未加载。

或使用jQuery的$（文件）。就绪

来源

2013-07-23 20:24:54

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

来源

2013-07-23 20:28:31 Terrance

您可以使用此代码inested你的代码，它的工作！

在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-23 20:47:32 SDWACW

更改图像时出现问题javascript

回答

相关问题