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

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

javascript function timer

如何通过将函数分配给不同的按钮将JavaScript函数应用于不同的元素,javascript,function,timer,reset,Javascript,Function,Timer,Reset,我试图建立一个定时器复位功能。我确实了解如何重置一个按钮的值，但我不知道如何使用每个按钮自己的计时器将相同的功能分配给不同的按钮目前我使用下面的代码，但它专门针对一个元素，而它应该适用于不同的元素 <html> <head> <script> function resettimer() { var x = document.getElementsByClassName("timer"); x[0].innerH

我试图建立一个定时器复位功能。我确实了解如何重置一个按钮的值，但我不知道如何使用每个按钮自己的计时器将相同的功能分配给不同的按钮

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

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


函数resettimer（）{
var x=document.getElementsByClassName（“计时器”）；
x[0]。innerHTML=“你好，世界！”；
}
计时器1
重置计时器1
计时器2
重置计时器2
计时器3
重置计时器3
计时器4
复位定时器4

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


功能重置计时器（btn）{
btn.previousSibling.innerHTML=“你好，世界！”；
}
计时器1
重置计时器1
计时器2
重置计时器2
计时器3
重置计时器3
计时器4
复位定时器4

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


功能重置计时器（btn）{
btn.previousSibling.innerHTML=“你好，世界！”；
}
计时器1
重置计时器1
计时器2
重置计时器2
计时器3
重置计时器3
计时器4
复位定时器4

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

接下来，您需要移动

脚本

，使其正好位于关闭

主体

标记之前，以便在遇到时，所有HTML都已读入内存，并且您可以成功访问元素

您也不应该使用内联HTML事件处理属性（即，

onclick

），因为这是一项已有20多年历史的技术，已经有了。相反，将JavaScript与HTML完全分离

此外，还存在一些HTML有效性问题（没有关闭

table

tag）

最后，当您正在设置/获取的值不包含任何HTML时，不要使用

.innerHTML

——这是一种浪费处理。当没有HTML可设置/获取时，使用

.textContent


计时器1
重置计时器1
计时器2
重置计时器2
计时器3
重置计时器3
计时器4
复位定时器4
//将所有按钮放入一个数组中，并在数组中循环
var btns=Array.prototype.slice.call（document.queryselectoral（“button.reset”）；
btns.forEach（功能（btn）{
btn.addEventListener（“单击”，重置计时器）；
});
//将所有计时器元素放入一个集合中
var timers=document.querySelectorAll（“p.timer”）；
函数resettimer（）{
//使用与所单击按钮的索引相同的索引访问计时器
定时器[btns.indexOf（this）].textContent=“你好，世界！”；
}