不明白为什么我的addEventListener不起作用

问题描述 投票：0回答：1

亲爱的，

我是编程新手，以下是我的程序：

const p = document.querySelector('p');

class Bee {
  static welcome_tips() {
    return 'Welcome to here';
  }

  static welcome() {
    p.innerHTML = this.welcome_tips();
  }
};

p.addEventListener('click', () => {
  Bee.welcome();
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>static method practice</title>
</head>

<body>
  <p></p>
</body>

</html>

我的想法是，当有人点击 HTML 中的 

<p>
时，将会显示一条语句“欢迎来到这里”。出于某种原因，我希望将以下两个静态方法包含在我的程序中。但是，当我单击 HTML 时，它什么也没有显示。我发现当我只使用 Bee.welcome() 时，会自动显示“欢迎来到这里”语句。你能告诉我哪里错了吗？谢谢。

javascript class methods static addeventlistener
1个回答
1
投票

我很高兴听到您开始了您的编程之旅。为了更好地理解，我根据评论更新了代码。希望这对您有帮助。您只需运行并测试即可。

const p = document.querySelector('p');

class Bee {
  static welcome_tips() {
    return 'Welcome to here';
  }

  static welcome() {
    p.innerHTML = this.welcome_tips();
  }
};

p.addEventListener('click', () => {
  Bee.welcome();
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>static method practice</title>
</head>

<body>
  <p>Click Here</p>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.