有人能告诉我为什么我的 js 计时器不工作吗？

Question

I really dont know what is happening I recently made this flask application and came across this error where my buttons don't works for other html table rows that are there and i don't know why.我真的不知道发生了什么我最近制作了这个 flask 应用程序并遇到了这个错误，我的按钮不适用于其他 html 表行，我不知道为什么。 I tried my best to solve it but sadly couldn't.我尽力解决它，但遗憾的是无法解决。 If someone can help me i would really appreciate it如果有人可以帮助我，我将不胜感激

HERE IS THE HTML CODE这是 HTML 代码

<html lang="en">
<head>
  <title>Timer</title>
  <style>
    body{

      background-color: khaki;
    }

    h1{
      font-family: monospace;
      font-size:5em;
      transform: translate(500px, 10px);


    }
/* 
     h4{
      font-family:monospace;
      font-size: 2em;
      transform: translate(700px, 10px);
    }  */
   div.container input[type=submit] {
 
    background-color:khaki; 
    border-radius: 1.8em 1.8em 1.8em;
    text-transform: uppercase;  
    color: black;
    border: none; 
    font-size: 2em;
    font-family: monospace;
    transform: translate(500px, 10px);
 
  
 }

 div.container input[type=text]{
  transform: translate(500px, 10px);
 }

  table th{
    text-align: left;
    padding: 4px 8px;
    transform: translate(500px, 10px);
  }
  table td{
   /* background-color: aqua; */
   border: 2px solid black;
   padding: 4px 8px;
   transform: translate(500px, 10px);
 }

  .btn{
    background-size: 1em;
    height: 2em;
    width: 3em;
  }

  body{
    margin: 0;
  }
  .draggable{
    padding:1rem;
    background-color: aliceblue;
    border: 1px solid brown;
    cursor: move;
  }

  .draggable.dragging{
    opacity:0.5;
  }

  button.buttonReset{
    color: black;
    transform: scale3d(0.2, 0.2, 0.2);
  }
  .display{
    font-family: monospace;
  }
  button.buttonPlay{
    transform: translate(10px);
  }

  

  </style>


  <link rel="shortcut-icon" href="{{url_for('static', filename='favicon.ico')}}">

</head>
<body>
  <div class="container">
    <h1>Task Manager</h1>
    <br/>
    <form action="/my_timers" method="POST">
       <input type="text" placeholder="Enter New Task" name = "name" maxlength="10"> 
       <input type="submit" value="+" class="btn btn-secondary" name="hello">
    
    </form>
    <br/><br/>
    
    <table>
      <tr>
        <th>TASK</th>
        <th>       </th>
        <th>       </th>
        <th>DONE</th>
        <th>TIME TAKEN</th>
        
      </tr>

      
    </table>
    {% for friend in friends%}
    <table>
      
      <tr>
        
        <td>
          <div class="container2">
          <p class="draggable" draggable="true">
          {{ friend.name }} <a href="/update/{{ friend.id }}" class="btn-outline-secondary btn-sm">Update</a>
          </p>
        </div>
        </td>
        </p>
    
          
        </td>

        <td>
          <a href="/delete/{{ friend.id }}">
            <button class="btn"> <img src="static/7bdd1bc7db7fd48025d4e39a0e2f0fd8.jpg" alt="button" width="20" height="20" ></button>
            
          </a>

          <a href="/description">

            <button class="desbtn">+<button>
          </a>
        
          
        </td>

        <td>
          <div class="stopwatch">
      
      <div class="circle">
        <span class="time" id="display">00:00:00</span>
      </div>

      <div class="controls">
        
          <img id="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg" />
        

        
          <img id="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg" />
        

        
          <img id="resetButton" src="/static/download.png" />
        
      </div>
    </div>
    
  
        </td>
      </tr>
    </table>

    <script src="static/new.js"></script>
    <!-- <table>
        <td>
          {{ friend.name }}
        </td>

    </table> -->
      
    {% endfor%}








  </div>
  
</body>
</html>

AND HERE IS THE JS:这是JS：

const timer = document.getElementById('circle');

var hr = 0;
var min = 0;
var sec = 0;
var stoptime = true;

function startTimer() {
  if (stoptime == true) {
        stoptime = false;
        timerCycle();
    }
}
function stopTimer() {
  if (stoptime == false) {
    stoptime = true;
  }
}

function timerCycle() {
    if (stoptime == false) {
    sec = parseInt(sec);
    min = parseInt(min);
    hr = parseInt(hr);

    sec = sec + 1;

    if (sec == 60) {
      min = min + 1;
      sec = 0;
    }
    if (min == 60) {
      hr = hr + 1;
      min = 0;
      sec = 0;
    }

    if (sec < 10 || sec == 0) {
      sec = '0' + sec;
    }
    if (min < 10 || min == 0) {
      min = '0' + min;
    }
    if (hr < 10 || hr == 0) {
      hr = '0' + hr;
    }

    timer.innerHTML = hr + ':' + min + ':' + sec;

    setTimeout("timerCycle()", 1000);
  }
}

function resetTimer() {
    timer.innerHTML = '00:00:00';
}

The play button, pause button, reset button dont works for any other task that i add.播放按钮、暂停按钮、重置按钮不适用于我添加的任何其他任务。 Please check请检查

Answer 1

So you do not keep track which timer you wanter to play.因此，您无需跟踪要播放的计时器。
I introduce you to classes.我给你介绍类。
I tried to keep most of your original code intact but I had to made some changes.我试图保持您的大部分原始代码完好无损，但我不得不进行一些更改。

First change is as I said, using classes.正如我所说，第一个变化是使用类。 this code created a Timer object for each .timer element so it will be easier to keep track of each individual timer.此代码为每个.timer元素创建了一个 Timer object，因此更容易跟踪每个单独的计时器。

Second change is adding event listeners so clicking on buttons actually do something第二个变化是添加事件侦听器，因此单击按钮实际上会做一些事情

Next is removing sec = parseInt(sec);接下来是删除sec = parseInt(sec); . . That is unnecessary beacause you dont have to keep track of leading 0 in this variable.这是不必要的，因为您不必跟踪此变量中的前导 0。 You can add it just before displaying it for example in printTimer() method.您可以在显示它之前添加它，例如在printTimer()方法中。

 class Timer { timer = null; hr = 0; min = 0; sec = 0; stopTime = true; constructor(timer) { this.timer = timer; this.setListeners(); } setListeners = () => { this.timer.querySelector('.playButton').addEventListener('click', this.startTimer); this.timer.querySelector('.pauseButton').addEventListener('click', this.stopTimer); this.timer.querySelector('.resetButton').addEventListener('click', () => { this.stopTimer(); this.resetTimer(); }); } startTimer = () => { if (this.stopTime === true) { this.stopTime = false; this.timerCycle(); } } stopTimer = () => { if (this.stopTime === false) { this.stopTime = true; } } resetTimer = () => { this.hr = 0; this.min = 0; this.sec = 0; this.printTimer(); } timerCycle = () => { if (this.stopTime === false) { this.sec += 1; if (this.sec === 60) { this.min += 1; this.sec = 0; } if (this.min === 60) { this.hr += 1; this.min = 0; } this.printTimer(); setTimeout(this.timerCycle, 1000); } } printTimer = () => { const displayHr = this.hr < 10? '0' + this.hr: this.hr; const displayMin = this.min < 10? '0' + this.min: this.min; const displaySec = this.sec < 10? '0' + this.sec: this.sec; this.timer.querySelector('.display').innerHTML = displayHr + ':' + displayMin + ':' + displaySec; } } const timers = document.querySelectorAll('.timer'); timers.forEach(timer => { new Timer(timer); });

 body { background-color: khaki; margin: 0; } button.buttonReset { color: black; transform: scale3d(0.2, 0.2, 0.2); } button.buttonPlay { transform: translate(10px); }.display { font-family: monospace; }

 <div class="timer"> <div class="circle"> <span class="time display">00:00:00</span> </div> <div class="controls"> <img class="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg"/> <img class="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg"/> <img class="resetButton" src="/static/download.png"/> </div> </div> <div class="timer"> <div class="circle"> <span class="time display">00:00:00</span> </div> <div class="controls"> <img class="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg"/> <img class="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg"/> <img class="resetButton" src="/static/download.png"/> </div> </div> <div class="timer"> <div class="circle"> <span class="time display">00:00:00</span> </div> <div class="controls"> <img class="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg"/> <img class="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg"/> <img class="resetButton" src="/static/download.png"/> </div> </div>

有人能告诉我为什么我的 js 计时器不工作吗？

问题描述

1 个解决方案

解决方案1
2 2021-06-02 09:07:49

有人能告诉我为什么我的 js 计时器不工作吗？

问题描述

1 个解决方案

解决方案1 2 2021-06-02 09:07:49

解决方案1
2 2021-06-02 09:07:49