输出表示img元素不存在(为null），但脚本在img的实现下面，并使用了onload(）

Output is saying the img element does not exist (is null), but script is below implementation of img and onload() is used

本文关键字：img 实现 onload 不存在 元素 表示 null 脚本 输出      更新时间：2023-09-26

我已经完成了这里的所有问题，这些问题与"Uncaught TypeError:无法设置null的属性'src（innerHTML等）'"错误有关，他们都说：

1.将脚本标记移到所有html代码下面（我已经做了），然后

2.在onload事件处理程序中包装所有javascript文本，据我所知，我也这样做了。

所以，我的问题。。。为什么我得到"Uncaught TypeError:无法将属性'src'设置为null"？

提前感谢

    <html>
<head>
    <title>Lab 8</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            text-align: center;
        }
        img{
            margin-left: auto; 
            margin-right: auto; 
            width: 900px; 
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/sailboat.jpg" alt="sailboat" id="sailboatImg">
    </div>
    <script type="text/javascript">
        window.addEventListener("load", function() {
            var i = 0;
            function clickHandler (event){
                i += 1;
                if (i == 1){
                    document.getElementById(sailboatImg).src = "images/i14.jpg";
                }else if(i == 2){
                    document.getElementById(sailboatImg).src = "images/c&c.png";
                }else if (i == 3){
                    document.getElementById(sailboatImg).sec = "images/420.jpg";
                }
            }
            document.getElementById("sailboatImg").addEventListener("click", clickHandler);
        });
    </script>
</body>

我想您遗漏了引号：clickHandler:中的"

function clickHandler (event){
    i += 1;
    if (i == 1){
        document.getElementById("sailboatImg").src = "images/i14.jpg";
 //--------------------------------------^these
   }else if(i == 2){
       document.getElementById("sailboatImg").src = "images/c&c.png";
   }else if (i == 3){
       document.getElementById("sailboatImg").src = "images/420.jpg";
   }
}

顺便说一句，缓存对<img>的引用比反复查询要好：

window.addEventListener("load", function() {
  var i = 0;
  var img = document.getElementById("sailboatImg");
  function clickHandler(event) {
    i += 1;
    if (i == 1) {
      img.src = "images/i14.jpg";
    } else if (i == 2) {
      img.src = "images/c&c.png";
    } else if (i == 3) {
      img.src = "images/420.jpg";
    }
  }
  img.addEventListener("click", clickHandler);
});
相关文章：