文章/答案/技术大牛

发布

社区首页 >问答首页 >试图理解JS控制台日志中未定义的值

问试图理解JS控制台日志中未定义的值
EN

Stack Overflow用户

提问于 2022-09-10 12:56:10

回答 2查看 44关注 0票数 0

我刚开始学习Javascript。

我想通过控制台日志来找到我的playToggle按钮的子程序，但是我得到的是TypeError:无法读取null的属性(读取'addEventListener')。请帮助我学习我做错了什么，我的印象是我给了playToggle一个价值。

const playToggle = document.getElementById('music- 
player');
 function changeIcon(){
     console.log(playToggle.children);
 }
 
 playToggle.addEventListener('click', changeIcon);

HTML：

 <div class="theme-switch-wrapper">
   <span id="music-player">some text</span>
     <i id="playBtn" class="fa-solid fa-circle-play"></i>
     <i id="pauseBtn" class="fa-regular fa-circle-pause"></i>
 </span>
 </div>

javascript

function

null

回答 2

Stack Overflow用户

发布于 2022-09-10 13:11:49

如果您正确地放置了脚本标记，并且没有输入id，那么它应该工作得很好。

<!DOCTYPE html>
<html>
  <head>
    <title>Show Children</title>
  </head>
  <body>
    <div class="theme-switch-wrapper">
      <span id="music-player">some text
        <i id="playBtn" class="fa-solid fa-circle-play"></i>
        <i id="pauseBtn" class="fa-regular fa-circle-pause"></i>
      </span>
    </div>
    <script>
      const playToggle = document.getElementById('music-player');
        function changeIcon(){
        console.log(playToggle.children);
       }
      playToggle.addEventListener('click', changeIcon);
    </script>
  </body>
</html>

票数 0

Stack Overflow用户

发布于 2022-09-10 15:26:27

    const playToggle = document.getElementById('music-player');
        
        function changeIcon() {
            console.log(playToggle.children);
        }

        playToggle.addEventListener('click', changeIcon);

    <div class="theme-switch-wrapper">
        <span id="music-player">some text
        <i id="playBtn" class="fa-solid fa-circle-play"></i>
        <i id="pauseBtn" class="fa-regular fa-circle-pause"></i>
        </span>
    </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73671962

复制

相似问题

问试图理解JS控制台日志中未定义的值
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试图理解JS控制台日志中未定义的值EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试图理解JS控制台日志中未定义的值
EN