JavaScript-添加事件侦听器以新创建按钮-堆栈溢出

顺晟科技

2022-10-19 13:01:36

181

HTML

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

数据

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

在上面的代码中我正在尝试

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

将这些变量和触发器事件侦听器更新到new按钮，但frdBtn、bckBtn、suprise没有更新，eventlistners绑定到在Window.AddeventListener上创建的原始按钮（“DomContentLoaded”,loadPerson（0））；

顺晟科技：

您的代码中有几个问题。

首先，您必须提供一个作为参数的。您当前正在传递函数执行后的返回值，这不是您想要的:

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

之后，应该在函数中移动事件侦听器，否则它们会在元素存在之前执行（它们是异步添加的）。

您应该做的最后一件事：当节点有几个副本（几个人）时，不要用一个标识节点。使HTML无效，在这种情况下，只检索第一个匹配的元素。

还有，也应该进去。否则，您将其从原来的位置移除，然后再次追加。

例如，您可以使用then attach事件侦听器，然后将它们追加到。如果CSS与选择器一起应用，请使用类。

所以这里有很多错误。

首先，您加载的事件并没有按照您认为的方式执行。

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

调用并赋值返回的值（该值将未定义，因为函数中没有返回任何内容），并将其赋值为事件发生时要触发的操作。

更改为

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

这将在事件触发器时调用匿名函数。

其次，在脚本第一次运行时，代码将应用事件侦听器。它实际上只因为您在上面描述的问题上犯了错误而起作用。

您需要在事件上执行所有代码（老实说，确保JS脚本文件是页面上加载的最后一个元素更容易也更好）。

现在使用您的按钮和它们的逻辑。您需要知道JS事件侦听器不是“持久的”，即如果您创建了一个新按钮，您需要告诉JS将侦听器应用到新创建的按钮。

如果我是您，我会以编程方式创建元素，而不是手动键入HTML元素作为值。AKA

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

可以

<!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>View Review</title>
    <link rel="stylesheet" href="style.css" />
  </head> 

  <body>
    <div class="content">
      <h1 id = "ourReview">Our Reviews</h1>
    </div>
  </body>
  <script src="app.js"></script>
  <script src="script.js"></script>
</html>

这应该进入处理这些元素创建的函数中。此外，所有id属性都必须是唯一的。您可以将它们切换到与JS相关的类名（也就是预置的类名或可以标识为与JS相关的类名），或者只是确保ID是唯一的（附加一个数字）。我不建议后者，因为它会让人困惑。

上一篇：JavaScript--为什么这个箭下一篇：JavaScript-五彩纸屑掉落动

网站建设

Html

JavaScript-添加事件侦听器以新创建按钮-堆栈溢出