如何通过将函数分配给不同的按钮来将 JavaScript 函数应用于不同的元素答案

【问题标题】：How to apply a JavaScript function to different elements by assigning the function to different buttons如何通过将函数分配给不同的按钮来将 JavaScript 函数应用于不同的元素
【发布时间】：2018-04-19 15:21:29
【问题描述】：

我正在尝试为计时器构建重置功能。我确实了解如何重置一个按钮的值，但我不知道如何将相同的功能分配给不同的按钮，每个按钮都有自己的计时器。

目前我使用下面的代码，但它专门针对一个元素，而它应该适用于不同的元素。

<html>
<head>
    <script>
    function resettimer() {
        var x = document.getElementsByClassName("timer");
        x[0].innerHTML = "Hello World!";
    }
    </script>
</head>
<body>
    <table> 
        <tr>
            <p class="timer">Timer 1</p>
            <button onclick="resettimer()">Reset timer 1</button>
        </tr>
        <tr>
            <p class="timer">Timer 2</p>
            <button onclick="resettimer()">Reset timer 2</button>
        </tr>
        <tr>
            <p class="timer">Timer 3</p>
            <button onclick="resettimer()">Reset timer 3</button>
        </tr>
        <tr>
            <p class="timer">Timer 4</p>
            <button onclick="resettimer()">Reset timer 4</button>
        </tr>
    <table>
</body>
</html>

【问题讨论】：

这不会长期有效。您需要一些方法来区分计时器状态，并且您必须将 DOM 处理程序/元素绑定到该状态。否则只会一团糟。
我已经编辑了帖子并修复了头部和身体标签错误

标签： javascript function timer reset

【解决方案1】：

通过将所有按钮放入一个数组并将所有计时器放入一个“类数组”对象中，您可以简单地设置索引与被单击按钮的索引匹配的计时器（例如，如果单击按钮 0 , 更新计时器 0)。

接下来，您需要将script 移动到关闭body 标记之前，这样在遇到时，所有HTML 都已读入内存，您可以成功访问元素。

您也不应该使用内联 HTML 事件处理属性（即onclick），因为这是一种已有 20 多年历史的技术，具有 many reasons to not use them。而是将 JavaScript 与 HTML 完全分开。

此外，您还有一些 HTML 有效性问题（没有关闭 table 标记）。

最后，当您设置/获取的值不包含任何 HTML 时，请勿使用 .innerHTML - 这是对处理的浪费。当没有要设置/获取的 HTML 时使用.textContent。

<!doctype html>
<html>
<head></head>
<body>
<table>
  <tr>
    <p class="timer">Timer 1</p>
    <button class="reset">Reset timer 1</button>
  </tr>

  <tr>
    <p class="timer">Timer 2</p>
    <button class="reset">Reset timer 2</button>
  </tr>

  <tr>
    <p class="timer">Timer 3</p>
    <button class="reset">Reset timer 3</button>
  </tr>

  <tr>
    <p class="timer">Timer 4</p>
    <button class="reset">Reset timer 4</button>
  </tr>

</table>
  <script>
    // Get all the buttons into an array and loop through the array
    var btns = Array.prototype.slice.call(document.querySelectorAll("button.reset"));
    btns.forEach(function(btn){
      btn.addEventListener("click", resettimer);
    });
    
    // Get all the timer elements into a collection
    var timers = document.querySelectorAll("p.timer");
  
    function resettimer() {
      // Access the timer with the same index as the index of the button that was clicked
      timers[btns.indexOf(this)].textContent = "Hello World!";
    }
  </script>
</body>
</html>

【讨论】：

感谢您的帮助和解释！

【解决方案2】：

一种解决方案是使用 this 关键字

 <html>
     <head>
        <script>
          function resettimer(btn) {
             btn.previousSibling.innerHTML = "Hello World!";
          }
        </script>
    </head>
    <body>
    <table>
       <tr>
            <p class="timer">Timer 1</p>
            <button onclick="resettimer(this)">Reset timer 1</button>
       </tr>
       <tr>
           <p class="timer">Timer 2</p>
           <button onclick="resettimer(this)">Reset timer 2</button>
       </tr>
       <tr>
           <p class="timer">Timer 3</p>
           <button onclick="resettimer(this)">Reset timer 3</button>
       </tr>
       <tr>
           <p class="timer">Timer 4</p>
           <button onclick="resettimer(this)">Reset timer 4</button>
       </tr>
   <table>
   </body>
 </html>

【讨论】：

感谢您的帮助和解释！