Функция OnClick не отключается через <td>

Question

Я работаю над проектом в MVC и использую javascript, чтобы запустить секундомер. Проблема, с которой я столкнулся, заключается в том, что если кнопка, которая запускает секундомер, находится в таблице, а точнее в tabledata, секундомер не выключается go. Я попытался разместить его вне стола, и он работает нормально. Есть ли решение, позволяющее мне оставить кнопку в таблице, но при этом она все еще работает?

<script type="text/javascript">
    let seconds = 0;
    let minutes = 0;
    let hours = 0;

    let displaySeconds = 0;
    let displayMinutes = 0;
    let displayHours = 0;

    let interval = null;

    let status = "stopped";

    function stopWatch() {

        seconds++;

        if (seconds / 60 === 1) {
            seconds = 0;
            minutes++;

            if (minutes / 60 === 1) {
                minutes = 0;
                hours++;
            }

        }

        if (seconds < 10) {
            displaySeconds = "0" + seconds.toString();
        }
        else {
            displaySeconds = seconds;
        }

        if (minutes < 10) {
            displayMinutes = "0" + minutes.toString();
        }
        else {
            displayMinutes = minutes;
        }

        if (hours < 10) {
            displayHours = "0" + hours.toString();
        }
        else {
            displayHours = hours;
        }

        document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

    }



    function startStop() {

        if (status === "stopped") {

            interval = window.setInterval(stopWatch, 1000);
            document.getElementById("startStop").innerHTML = "Stop";
            status = "started";

        }
        else {

            window.clearInterval(interval);
            document.getElementById("startStop").innerHTML = "Start";
            status = "stopped";

        }

    }

    function reset() {

        window.clearInterval(interval);
        seconds = 0;
        minutes = 0;
        hours = 0;
        document.getElementById("display").innerHTML = "00:00:00";
        document.getElementById("startStop").innerHTML = "Start";

    }
</script>

<table>
    ...
    <tr>
        ...
        <td id="display">00:00:00</td>
        <td><button id="startStop" onclick="startStop()">Start</button></td>
        ...
    </tr>

Answer 1

Если вы вообще используете jQuery: попробуйте использовать $(document).ready(function() {})

Функция готовности документа загрузится, убедитесь, что ваш скрипт доступен до того, как HTML загрузится таким образом, starpStop() не будет быть undefined и вы сможете звонить внутри любого элемента.

Кнопка находится в таблице, как вы хотите. Работает нормально.

let seconds = 0;
let minutes = 0;
let hours = 0;

let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

let interval = null;

let status = "stopped";

function stopWatch() {
  seconds++;

  if (seconds / 60 === 1) {
    seconds = 0;
    minutes++;

    if (minutes / 60 === 1) {
      minutes = 0;
      hours++;
    }

  }

  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }

  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }

  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }

  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

}



function startStop() {
  if (status === "stopped") {
    console.log('Started')
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";

  } else {
    console.log('Stopped')
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
  }

}

function reset() {
  window.clearInterval(interval);
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("display").innerHTML = "00:00:00";
  document.getElementById("startStop").innerHTML = "Start";

}

<table>
  <tr>
    <td id="display">00:00:00</td>
    <td><button id="startStop" onclick="startStop()">Start</button></td>
  </tr>
</table>

Надеюсь, это поможет.