Q&Aいつもお世話になってます。
javascript初学者です。
現在、簡易的なカウント機能を作成中です。
カウントボタン機能
・startボタンをクリックしたらカウントが始まる（1ずつカウントされる）
・stopボタンを押したらカウントは停止する（再度startボタンを押したらカウント開始される）
・resetボタンを押したら初期値（0）に戻る
今、困っていること
リセット機能がうまく動作しない。
resetボタンを押しても何故か初期値（０）に戻ってくれない。
発生しているエラーメッセージ
特になし
該当のソースコード
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 </head> 8 9 <body> 10 <h1>1秒ずつカウントアップされていきます</h1> 11 <input type="button" id="start_btn" value="カウントスタート" onClick="start();" /> 12 <input type="button" id="stop_btn" value="カウントストップ" onClick="stop();" /> 13 <input type="button" id="reset_btn" value="カウントリセット" onClick="reset();" /> 14 <p id="counttimer">0</p> 15 <script type="text/javascript" src="191109.js"></script> 16 </body> 17</html>
javascript
1//カウントする変数 2var count = 0; 3//カウントID 4var countId; 5 6function start() { 7 countId = setInterval(function() { 8 document.getElementById("counttimer").innerText = count; 9 count++; 10 //console.log(count++); 11 }, 1000); 12} 13 14function stop() { 15 clearInterval(countId); 16} 17 18function reset() { 19 var resetText = document.getElementById("counttimer").innerText; 20 resetText.textContent = 0; 21 //count = 0; 22}
試したこと
resetText.textContent = 0;で右辺を左辺に代入しているのでresetText.textContentは0になります。
textContentを使用して書き換えるプログラムを作成しているのに何故か実行されない。
resetボタンを押したらreset関数が実行され、画面上は0に書き換わるはずですが。。。
resetボタンを押しても0にリセットされないので今回は0にリセットされない原因を知りたいです。
回答2件
0
ベストアンサー
resetText.textContent = 0;で右辺を左辺に代入しているのでresetText.textContentは0になります。
resetTextはただの文字列では？
投稿2019/11/09 16:10
総合スコア69398
0
reset関数を下記のように変更したら理想通りの処理が実行されるようになりました。
そもそもDOMで存在しないものを取得していたことに自分自身全く気づいていませんでした。
今回は問題解決のヒントをくれたkeiさんをベストアンサーとさせていただきます。
function reset() { count = 0; document.getElementById("countTimer").innerText = count; }
投稿2019/11/09 16:55
編集2019/11/09 20:03
総合スコア128
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/09 16:26 編集
2019/11/09 16:29
2019/11/09 16:56 編集
2019/11/09 20:04 編集