ジャバスクリプトで、addEventListenerエラーになってしまいます。

Question

解決したいこと

Javaスクリプトを使用してタイマー機能をつけているときにエラーで

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at Object../app/javascript/time.js

を解決したいです。

Javaを勉強しておりまして、クリックした時にタイマーがスタートし、ストップ、リセットできる様にしたいのですがうまくいかないので、お力をお借りしたいです。

const stopwatch = document.getElementById('stopwatch');
const start = document.getElementById('start');
const reset = document.getElementById('reset');

let state = 'start';
let timerId;
let elapsedMs = 0;

function timeToString(millis) {
    const ms = millis % 1000; 
    const s = Math.floor(millis / 1000) % 60;
    const m = Math.floor(millis / 1000 / 60) % 60;

    const formattedMs = ms.toString().padStart(3, '0');
    const formattedS = s.toString().padStart(2, '0');
    const formattedM = m.toString().padStart(2, '0');

    return `${formattedM}:${formattedS}.${formattedMs}`;
}

start.addEventListener('click', () => {
    if (state === 'start') {
        state = 'stop';
        start.textContent = 'ストップ';
        start.classList.add('stop');

        let startMs = Date.now(); 
        startMs -= elapsedMs;

        timerId = setInterval(() => {
            const nowMs = Date.now();
            elapsedMs = nowMs - startMs; 
    
            stopwatch.textContent = timeToString(elapsedMs);
        }, 10);
    } else { 
        state = 'start';
        clearInterval(timerId);
        start.textContent = 'リスタート';
        start.classList.remove('stop');

    }
});

reset.addEventListener('click', () => {
    state = 'start';
    clearInterval(timerId);
    start.textContent = 'スタート';
    start.classList.remove('stop');
    elapsedMs = 0;
    stopwatch.textContent = '00:00.000';
});

<div id="stopwatch">00:00.000</div>
    <div id="buttons">
        <button type="button" id="reset" class="button">リセット</button>
        <button type="button" id="start" class="button">スタート</button>
    </div>
    <script src="js/time.js"></script>

Comments

[maisumakun]

どの行でエラーになったかはわかりますか？

[itagagaki]

そのコードでエラーなく動きましたよ。
それからJavaScriptとJavaはまったくの別物ですので念のため。
タグはJavaScriptになっているのでいいのですが。

[maisumakun]

ご提示のコードでエラーが再現しません。

https://jsfiddle.net/uL6pcr7s/

[shos3]

ご回答有難うございます。
start.addEventListener('click', () => {
if (state === 'start') {
state = 'stop';
start.textContent = 'ストップ';
start.classList.add('stop');
のstart.addEventListenerでエラーで動作しないのですが。。。自分ので動かない原因など分かりましたら教えてもらえると助かります。

[shos3]

maisumakunさんitagagakiさんご回答有難うございました。無事解決することができました。
また、時間を割いて確かめて頂き有難うございました。もっと学習して知識をつけていきます。

Answer 1

jsソースの全体を
「window.addEventListener('DOMContentLoaded', ()=>{」
と
「});」
で囲ってください
おそらくtime.jsの読み込みタイミングが間違っています

Comments

[shos3]

ご回答有難うございます。無事解決することができました。わからない部分が多いのでもっと学習していきます。有難うございました。