如何通过将功能分配给不同的按钮来将 JavaScript 功能应用于不同的元素

Question

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

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

<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>

Answer 1

一种解决方案是使用 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>

Answer 2

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

接下来，您需要将 script 移动到结束 body 标记之前，以便在遇到时，所有 HTML 都会有已经读入内存，可以成功访问元素

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

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

最后，当您的值 setting/getting 不包含任何 HTML 时，不要使用 .innerHTML - 这是一种处理浪费。当没有HTML到set/get时使用.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>

如何通过将功能分配给不同的按钮来将 JavaScript 功能应用于不同的元素

How to apply a JavaScript function to different elements by assigning the function to different buttons

javascript

function

timer

reset