1. ホーム
  2. javascript

[解決済み] TypeError: Cannot Set property 'onclick' of null

2022-01-29 17:07:11

質問

以下html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Stopwatch</title>
  </head>
  <body>
    <p><span id="seconds">00</span><span>:</span><span id ="tens">00</span></p>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    <script src="main.js"></script>
  </body>
</html>

以下javascript

window.onload = function () {
  var seconds = 0
  var tens = 0
  var getTens = document.getElementById('tens')
  var getSeconds = document.getElementById('seconds')
  var start = document.getElementById('Start')
  var stop = document.getElementById('Stop')
  var reset = document.getElementById('Reset')
  var interval
  start.onclick = function () {
    clearInterval(interval)
    interval = setInterval(startTimer, 10)
  }

  stop.onclick = function () {
    clearInterval(interval)
  }

  reset.onclick = function () {
    clearInterval(interval)
    tens = '00'
    seconds = '00'
    getTens.innerHTML = tens
    getSeconds.innerHTML = seconds
  }

  function startTimer() {
    tens++
    if (tens < 9) {
      getSeconds.innerHTML = '0' + tens
    }
    if (tens > 9) {
      getTens.innerHTML = tens
    }
    if (tens > 99) {
      console.log('seconds')
      seconds++
      getSeconds.innerHTML = '0' + seconds
      tens = 0
      getTens.innerHTML = '0' + 0
    }
    if (seconds > 9) {
      getSeconds.innerHTML = seconds
    }
  }
}

私はこれ(main.js:11 Uncaught TypeError.)を取得しています。Cannot set property 'onclick' of null (プロパティ 'onclick'をヌルに設定できません) at window.onload) のエラーがコンソールに表示され、原因が分かりません。HTML内のタグを移動させるなど、他の解決策も試しましたが、うまくいきません。

解決方法を教えてください。

id は大文字と小文字が区別されます。つまり、あなたの要素は #stop であって #Stop

  var stop = document.getElementById('stop')

これをすべての要素に対して行うようにすればよいのです。