スタートボタンを押しても設定した通りに動作しない

###実現したいこと
スタートボタンを押すとカウントダウンが始まる。

###現象
スタートボタンを押してもカウントダウンされない。
デベロッパーツールで確認しましたが、エラーはありませんでした。

###ソースコード
html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>カウント</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <p>残り時間：<span id="timer"></span></p>
      </div>
      <a href="" id="start" class="inactive">スタート</a>
    </div>
    <script src="main.js"></script>
  </body>
</html>

css

#start {
  text-decoration: none;
  display: block;
  background: gray;
  color: #fff;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  margin-top: 15px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  width: 300px;
}

var timer;
var timerLabel = document.getElementById("timer");
var timerId;
var startLabel = document.getElementById("start");

function init() {
  timer = 3;
  timerLabel.innerHTML = timer;
}
init();

function updateTimer(){
  timerId = setTimeout(function(){
    timer--;
    timerLabel.innerHTML = timer;
    if (timer < 0) {
      alert("Time Up");
      clearTimeout(timerId);
      init();
      return;
    }
    updateTimer();
  },1000);
}

startLabel.addEventListener("click", function(){
  updateTimer();
});

###ブラウザの表示
https://i.gyazo.com/6eb47da175ea4ccefcde0cbd2394f99c.png

因みにstartLabelをwindowに書き換えれば、スタートボタン含め、どこかしらの画面をクリックするとカウントダウンが始まります。

startLabel.addEventListener("click", function(){
  updateTimer();
});

window.addEventListener("click", function(){
  updateTimer();
});

うーん、原因が分かる方いらっしゃいましたら、ご回答お願いいたします。

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

回答1件

自己解決

<div id="btn">スタート</div> ↑HTMLを上記に変更し、CSS,JSファイルにも同様に変更したところ、正常にカウントダウンされました。

【追記】
<a href="javascript:void(0);" id="start" class="inactive">スタート</a>
↑こちらの記述でも同様に正常にカウントダウンされることを確認しました。（defghi1977
さん、ありがとうございます）

投稿2017/11/30 10:28

編集2017/11/30 11:18

narururu

総合スコア170

defghi1977

2017/11/30 10:36

href="javascript:void(0);"って方法があったような

narururu

2017/11/30 10:45

ご回答ありがとうございます。確かにjavascript:void(0);を使えば、正常に動作しました。恥ずかしながら初めて知りました。覚えておきます。ありがとうございました☺

defghi1977

2017/11/30 11:13

お暇があるなら回答に追加してもらえると後から見た人の役に立ちます. お願いいたします.

narururu

2017/11/30 11:20

回答欄に、追記しました。 teratail始めたばかりで、しきたりが良く分かっていませんでした。今後、似たようなケースがあれば、回答欄に追記するようにしますね。アドバイス、ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

スタートボタンを押しても設定した通りに動作しない

関連した質問