问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

这段js程序老是报错，很简单的，不知道为啥？

头像
udemy
    396595172

    HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js"></script>
</head>
<body>
    <div class="main" id="main">
        <div class="title" id="title">
            <a href="">首页</a><a href="">点击看看</a><a href="">会自动的</a><a href="">我的网站</a>
        </div>
        <div class="content bg0" id="content"></div>
    </div>
    
</body>
</html>

    CSS

    .main {
    width: 800px;
    height: 500px;
    margin: 0 auto;
    /* border: 1px solid #000; */
}
a { 
    display: inline-block;
    width: 200px;
    text-decoration: none;
    color: #666;
    font-size: 22px;
    /* background-color: #ccc; */
    text-align: center;
    line-height: 50px;

}
.content {
    width: 800px;
    height: 450px;
   
}
.bg0 {
    background: url(./img/1.jpg) 100%;
}
.bg1 {
    background: url(./img/5.jpg) 100%;
}
.bg2 {
    background: url(./img/3.jpg) 100%;
}
.bg3 {
    background: url(./img/4.jpg) 100%;
}

    js

    var title = document.getElementById("title");
var content = document.getElementById("content");
var alist = document.getElementsByTagName('a');
alist[0].addEventListener("click",function(){
    alert(333)
})

    点击第一个a元素总是报错，Uncaught TypeError: Cannot read property 'addEventListener' of undefined

    at script.js:20  为什么呢？
    javascript
    阅读 2.7k
    5 个回答
    得票最新
    头像
    joy钰
      9.1k53031
      ✓ 已被采纳

      解析到你 js 代码时 dom 还没生成。

      1. 把你<script src="./script.js"></script>移到body底部。
      2. 在 window.onload 事件中执行你的代码。
      头像
      我是预言家
        1.6k786169

        顺序问题把 我试了下好用的 看下你js写的位置 是不是dom没加载就执行js了
        你把那个scriptjs放到最下面

        头像
        小蚊酱
          5.3k42038

          你把script.js放在</body>的后面即可。

          因为在执行js时，下面的dom元素还没加载完，所以获取不到alist，更就没有alist[0]了

          头像
          七凉
            1.2k22646

            看看你的js加载位置吧， dom都还没渲染，怎么获取得到呢

            window.onload = function () {
// you code
}

            这样试试, 或者把引入script 放在body后面

            头像
            alexxxcs1
              33712639

              你需要在window.onload里面去执行获取getElement的操作，因为你把引入script.js写在了body的上面，是先加载了script.js，再去加载body的内容，所以你不能直接获取到，只有当页面加载完毕后才获取的到

              解决方法
              1.把<script src="./script.js"></script>放到body标签的底下
              2.把js改成

              window.onload = function(){
     var title = document.getElementById("title");
     var content = document.getElementById("content");
     var alist = document.getElementsByTagName('a');
     alist[0].addEventListener("click",function(){
         alert(333)
     })
}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题