Question

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

已确保脚本标签正确。

javascript

var x = document.getElementById("card_1_img");
x.src = "images/1.png";//the error occurs here

html

<img id="card_1_img" width="100" height="50">

我希望我的代码可以更改图片。

Answer 1

您的脚本最有可能在HTML加载之前运行。在结束<script>之前，请尝试将</body>标签放在页面底部：

var x = document.getElementById("card_1_img");
x.src = "images/1.png";

<body>
  <img id="card_1_img" width="100" height="50">
  <script src="script.js"></script>
</body>

Answer 2

不确定是什么问题，我将其复制。

可能是将script标签放在head标签中，而未创建img标签。

 var x = document.getElementById("card_1_img");
    x.src = "https://hinhanhdephd.com/wp-content/uploads/2015/12/hinh-anh-dep-girl-xinh-hinh-nen-dep-gai-xinh.jpg";

<img id="card_1_img" width="100" height="50">

Answer 3

您的代码正确！

实时示例：

function changeImg() {
  var x = document.getElementById("card_1_img");
  x.src = "https://www.w3schools.com/images/compatible_firefox.gif";
}

<img id="card_1_img" width="100" height="50" onclick="changeImg();" 
     src="https://www.w3schools.com/images/compatible_chrome.gif">

参考：

https://www.w3schools.com/jsref/prop_img_src.asp

如何使用JavaScript更改图片？

3 个答案:

实时示例：

参考：