时间戳

首页 > 解决方案 > 在使用 addEventListener 时遇到初学者 dom 操作练习的问题

javascript - 在使用 addEventListener 时遇到初学者 dom 操作练习的问题

问题描述

<html>
   <head>
    <title>Dom Manipulation intro</title>
    <!-- <link rel="stylesheet" href="domManStyle.css"> -->

   </head>
   <body>

        <button id="press">Click me</button>
        <p>No one has clicked me</p>

        <script type="text/javascript" src="DomManip.js"></script>
   </body>
</html>

//JS
var button = document.getElementById("#press");
var paragraph = document.querySelector("p");



button.addEventListener("press", onClick);



function onClick(){
    paragraph.textContent="Someone Clicked me.";
}

这是我尝试的第一个 Dom 操作练习并不断收到错误：无法读取 null 的属性 addEventListener。我还尝试设置 JS .addEventListener，例如：

 button.addEventListener("press" , function(){
        paragraph.textContent="Someone Clicked me.";
    });

但仍然得到同样的错误。

标签： javascripthtml

解决方案

首先，您的getElementById方法中有错字。您必须在没有#的情况下调用它，因为它已经是一个 id，因此不需要 id-identifier：

var button = document.getElementById("press");

二、没有按下事件，你想听一听：

button.addEventListener("click", onClick);

推荐阅读