リセット機能が初期値に戻らない理由を知りたい

いつもお世話になってます。
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件

ベストアンサー

resetText.textContent = 0;で右辺を左辺に代入しているのでresetText.textContentは0になります。

resetTextはただの文字列では？

投稿2019/11/09 16:10

kei344

総合スコア69643

hiroo_mokumoku

2019/11/09 16:26 編集

回答ありがとうございます。もう少し詳しく教えていただけないでしょうか？ keiさんの仰る通りでresetTextは文字列で数値の「0」を代入してます。右辺から左辺へ代入された値は書き換わるイメージですが、その認識が間違っているということでしょうか？

kei344

2019/11/09 16:29

resetText（＝「0」という文字列）にはtextContentなんていうプロパティが無いので、あらたに追加されるだけで、#counttimerのDOMにあるtextContentは書き換わりません。

hiroo_mokumoku

2019/11/09 16:56 編集

keiさんヒントをいただきありがとうございます。そのあと、自分で思考してプログラムを作成したら理想通りの挙動となりました。

hiroo_mokumoku

2019/11/09 20:04 編集

function reset() { count = 0; document.getElementById("countTimer").innerText = count; }

行動規範の内容に同意します

reset関数を下記のように変更したら理想通りの処理が実行されるようになりました。
そもそもDOMで存在しないものを取得していたことに自分自身全く気づいていませんでした。
今回は問題解決のヒントをくれたkeiさんをベストアンサーとさせていただきます。

function reset() {
　count = 0;
　document.getElementById("countTimer").innerText = count;
}

投稿2019/11/09 16:55

編集2019/11/09 20:03

hiroo_mokumoku

総合スコア128

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

カウントボタン機能

今、困っていること

発生しているエラーメッセージ

該当のソースコード

試したこと

関連した質問