Question

还有其他线索，但不适用于我的上下文。

赞：Alert returning more than once

Why is my alert showing more than once?

我正在学习JS。

目标：

1.-在加载页面上询问您的姓名。

2.-点击按钮时，它应返回：“你好[姓名]。今天是[日期/年份]”。

它可以正确完成工作，但是当我点击按钮时：

a）第一次：我只看到一个警报 b）第二次：我看到两个警报 c）Thrid时间：我看到三个警报 d）依此类推。

我等待页面加载等等。我不知道为什么会出现这种情况（Chrome和Firefox上的版本相同）。

我的代码：

JS：

document.addEventListener("click", myFunction);

function myFunction() {
    btn1 = document.getElementById("mybtn")
    btn1.addEventListener("click", function () {alert(messageParts.join(""));}, false);

}


function getMonthName(index) {
  var months = ["January", "February", "March",
    "April", "May", "June", "July", "August",
    "September", "October", "November", "December"
  ];
  return months[index];
}


function abbrName(text) {
  return text.substr(0, 3);
}

var date = new Date();

var messageParts = [
  "Hello, ",
  prompt("Please, enter your name", "Please, enter your name"),
  ". Today is ",
  date.getDate(),
  " ",
  abbrName(getMonthName(date.getMonth())),
  " ",
  ", ",
  date.getFullYear()
];

HTML

<!doctype HTML>

<html lang="es">
    <div id="headerr">
    <head>
        <meta charset="utf-8">
        <link href="website.css" rel="stylesheet"/>
        <script type="text/javascript" src="stack.js"></script>
    </head>
    </div>
    <body>

        <article>
          <h1>Función User's name and date</h1>
          <p>Nombre y fecha del día</p>
          <section>
            <button id="mybtn">Click to enter your name !</button>
          </section>
        </article>
    </body>
</html>

Answer 1

您正在添加一个新的事件侦听器，每次单击按钮时都会调用该操作。

修改

以下是您的代码的jsfiddle： http://jsfiddle.net/L707ak04/

以下是一个简单的新版本：http://jsfiddle.net/L707ak04/1/

简单地做：

btn1 = document.getElementById("mybtn") btn1.addEventListener("click", function () {alert(messageParts.join(""));}, false);

不在事件监听器中调用它。

Answer 2

您正在将函数绑定到click上的document事件，并且在该函数中，您将另一个处理程序绑定到按钮的click事件。

这意味着每次单击文档（这包括文档对象的任何子项，如按钮）时，您将添加一个新的侦听器，并且绑定到该对象上的事件的所有侦听器将在该事件触发时触发触发了。

因此，当您第一次单击该页面时，该按钮会添加一个侦听器，当您单击该按钮以触发警报时，您将添加第二个侦听器。第二次单击时，它将触发这两个处理函数，并绑定第三个，依此类推。

Here是一个演示，向您显示已绑定到按钮的监听器数量。只要您点击页面上的任意位置（包括按钮），它就会上升，这样您就可以确切地看到alert的确切次数。

另请注意，在数组中创建函数调用（如prompt()）将在创建数组后立即执行。在您的代码中，只要页面加载就会创建该数组。你想要做的是在按钮的处理程序中创建里面的数组，因此只有在点击按钮后才要求用户输入他们的名字：

var btn1 = document.getElementById("mybtn") btn1.addEventListener("click", function () { var date = new Date(); var messageParts = [ "Hello, ", prompt("Please, enter your name", "Please, enter your name"), ". Today is ", date.getDate(), " ", abbrName(getMonthName(date.getMonth())), " ", ", ", date.getFullYear() ]; alert(messageParts.join("")); }, false);

Demo

Javascript：警告显示不止一次

2 个答案: