按钮在被单击时不会执行任何操作

ezykj2lf 于 2022-10-02 发布在 Java

关注(0)|答案(3)|浏览(165)

所以我有一个带有按钮的HTML文件，以及一个应该具有某些功能的外部js文件。但这并不管用。代码如下：

Html完整代码：

const btn = document.getElementById("play");

btn.addEventListener("click", alertMessage);

function alertMessage() {
  alert("Pls tell me youre working...");
}

<html>

<body>

  <div class="text-box">
    <h1>BLOG</h1>
  </div>
  <div class="buttons">
    <button id="play"> OK </button>
  </div>
  <script src="music-player/scripts/app.js"></script>
</body>

</html>

JavaScript

来源：https://stackoverflow.com/questions/73923963/button-doesnt-do-anything-when-clicked

3条答案

按热度按时间

wwtsj6pe1#

因为Maximum call stack size是Maximum call stack size，因为function中的alert不会引用缺省的全局alert，而是引用进行无限递归的函数本身，所以您需要更改函数名。

const btn = document.getElementById("play");

btn.addEventListener("click", alertMessage);

function alertMessage()
{
  alert("Pls tell me youre working...");
}

<div class= "buttons">
    <button id="play"> OK </button>
    </div>
    <script src="music-player/scripts/app.js"></script>

如果您使用window.alert()并使用函数表达式而不是函数声明(覆盖全局警报)，它将工作得很好，但最好更改function名称以防止冲突。

const alert = () =>
{
  window.alert("Pls tell me youre working...");
}

const btn = document.getElementById("play");

btn.addEventListener("click", alert);

<div class= "buttons">
    <button id="play"> OK </button>
    </div>
    <script src="music-player/scripts/app.js"></script>

赞(0）回复(0）举报 2022-10-02

hvvq6cgz2#

更新函数名称：

const btn = document.getElementById("play");

btn.addEventListener("click", alertMessage);

function alertMessage() {
  alert("Pls tell me youre working...");
}

<html>

<body>

  <div class="text-box">
    <h1>BLOG</h1>
  </div>
  <div class="buttons">
    <button id="play"> OK </button>
  </div>
  <script src="music-player/scripts/app.js"></script>
</body>

</html>

赞(0）回复(0）举报 2022-10-02

rkttyhzu3#

将函数的名称从ALERT改为其他，也可以直接在按钮标记中添加onClick=“Function()”

赞(0）回复(0）举报 2022-10-02