ストップウォッチのリセット機能がうまく作動しない

いつもお世話になってます。
javascript初学者です。
現在、簡易的なストップウォッチを作成してます。

ストップウォッチ機能

startボタンをクリックしたら計測スタート
stopボタンで一時停止、startボタンを押すと計測再開
resetボタンを押した時に初期値（0.0）に戻る

###今、困っていること

リセットボタンの機能がうまく作動しません。
リセットボタンを押したら初期値（0.0）に戻すように設定したいのですが何故か初期値に戻ってくれません。
エラーメッセージも表示されず、どこを修正して良いのかわからない状態です

前提・実現したいこと

リセットボタンを押したら初期値（0.0）になるように設定したい。

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

特になし

該当のソースコード

html
1<html>
2  <head>
3    <meta charset="utf-8" />
4    <title>ストップウォッチ</title>
5    <link rel="stylesheet" type="text/css" href="191103.css" />
6  </head>
7
8  <body>
9    <h1>ストップウォッチ</h1>
10    <div id="timer">0.0</div>
11    <input type="button" class="myButton" value="start" onClick="start();" />
12    <input type="button" class="myButton" value="stop" onClick="stop();" />
13    <input type="button" class="myButton" value="reset" onClick="reset();" />
14
15    <script type="text/javascript" src="191103.js"></script>
16  </body>
17</html>

css
1/* resetCSS */
2
3* {
4  margin: 0;
5  padding: 0;
6  border: 0;
7}
8
9body {
10  background: skyblue;
11  font: 20px sans-serif;
12  text-align: center;
13  margin: 0 auto;
14}
15
16h1 {
17  margin: 40px;
18}
19
20#timer {
21  margin-bottom: 20px;
22}
23
24.myButton {
25  font-size: 20px;
26  margin: 5px;
27  padding: 5px;
28  border-radius: 5px;
29}

js
1var timerCount = 0.0;
2var timerId;
3
4function CountTime() {
5  timerCount += 0.1;
6  var timer = document.getElementById("timer");
7  timer.textContent = Math.round(timerCount * 10) / 10;
8}
9
10function start() {
11  timerId = setInterval("CountTime();", 100);
12}
13
14function stop() {
15  clearInterval(timerId);
16}
17
18function reset() {
19  var reset = document.getElementsByClassName("myButton")[2].value;
20  reset.textContent = "0.0";
21  timerCount = 0.0;
22}

試したこと

input属性に対してidを付与し、getElementByIdで取得してみましたが結果は変わりませんでした。DOMが原因じゃないとすれば他に考えられる要因は何なのかご教示頂ければと思います。

html
1<input type="button" id="test" class="myButton" value="reset" onClick="reset();" />

js
1function reset() {
2  var test = document.getElementById("test").value;
3  test.textContent = "0.0";
4  timerCount = 0.0;
5}

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

回答1件

ベストアンサー

JavaScript
1function reset() {
2  /*var reset = document.getElementsByClassName("myButton")[0].value;
3  reset.textContent = "0.0";  <-こうじゃなくて*/
4  document.getElementById('timer').textContent = '0.0';// <-こう
5  timerCount = 0.0;
6}

完全蛇足です。スマートに書くとこうなります。

JavaScripr
1
2timerCount = 0;
3function start() {
4  timerId = setInterval(function(){
5    timerCount++;
6    document.getElementById("timer").textContent = timerCount / 10;
7  },100);
8}
9
10function stop() {
11  clearInterval(timerId);
12}
13
14function reset() {
15  document.getElementById('timer').textContent = '0.0';
16  timerCount = 0;
17}
18