質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1366閲覧

JavaScript のコードでどこが間違っているのかわからない。start をクリックしても処理が開始されない。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/02/27 06:21

タイマーを作っています。start をクリックすると処理が開始するようにしたいです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ストップウォッチ</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9<body> 10 <div class="container"> 11 <div id="timer">00:00.000</div> 12 <div class="control"> 13 <div id="btn" id="start">Start</div> 14 <div id="btn" id="stop">Stop</div> 15 <div id="btn" id="reset">Reset</div> 16 </div> 17 18 </div> 19 20 21 <script src="js/main.js"></script> 22</body> 23</html>

JavaScript

1"use strict"; 2{ 3 const timer =document.getElementById("timer"); 4 const start =document.getElementById("start"); 5 const reset =document.getElementById("reset"); 6 const stop =document.getElementById("stop"); 7 8 let startTime; 9 10 function countUp() { 11 const d = new Date(Date.now() - startTime ); 12 const m = String(d.getMinutes()).padStart(2, '0'); 13 const s = String(d.getSeconds()).padStart(2, '0'); 14 const ms = String(d.getMilliseconds()).padStart(3, '0'); 15 timer.textContent = `${m}:${s}.${ms}`; 16 17 setTimeout(() => { 18 countUp(); 19 }, 10); 20 } 21 22 start.addEventListener("click", () => { 23 startTime = Date.now(); 24 countUp(); 25 }); 26}

エラーメッセージ
main.js:22 Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js:22

試した事
・コードの見直し
・'addEventListener' of null
について調べる

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<div id="btn" id="start">のように、id属性に2つの値を指定することはできません。おそらく、この影響でdocument.getElementById("start")が空振りになっていると思われます。

投稿2020/02/27 06:24

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/02/27 07:44

ありがとうございます。解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問