10秒間のカウントダウンをブラウザに表示させたい

###実現したいこと
ブラウザに10秒間カウントダウンを表示させたい。
スタートボタンを押す→ブラウザに表示されている10の数字がカウントダウンされ0になると止まる。

###試したこと
setTimeoutを使ってコンソール上に10秒間のカウントダウンされるのは確認済。

###現象
ブラウザを読み込むタイミングでカウントダウンが始まる。
コンソールに表示される。

###ソースコード
html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>10秒カウント</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div id="timer">10</div>
      </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 count = 10;
  var countdown = function(){
    console.log(count--);
    var id = setTimeout(countdown, 1000);
    if(count < 0){　
      clearTimeout(id);
    }
  }
  countdown();

###ブラウザの画面
https://i.gyazo.com/eb658db534a118d1eea3ba9059eed342.png

かなり初歩的な質問だとは思いますが、アドバイスいただけますでしょうか。
以上、ご確認お願いいたします。

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

回答3件

ベストアンサー

こんなかんじですかね

javascript
1window.onload=function(){
2  document.querySelector('#start').addEventListener('click',function(e){
3    e.preventDefault();
4    var count = 10;
5    var id = setInterval(function(){
6      count--;
7      document.querySelector('#timer').textContent=count;
8      if(count <= 0) clearInterval(id);
9    },1000);
10  });
11}

HTML
1<div class="container">
2<div id="timer">10</div>
3</div>
4<a href="" id="start" class="inactive">スタート</a>
5</div>
6

※ただしこのままだとスタートボタンを2度押しすると惨憺たることになります
そのあたり仕様のきめこみが必要です

投稿2017/11/30 07:39

yambejp

総合スコア114784

narururu

2017/11/30 07:47

ご回答ありがとうございます。スタートボタンを二度押すと、確かにおかしな動きになりました。しかし、想像していた通りの結果が得られました。ありがとうございました。

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

定期的に呼び出すなら setTimeout ではなくて setInterval を使いましょう。

投稿2017/11/30 07:26

tacsheaven

総合スコア13703

narururu

2017/11/30 07:33

ご回答ありがとうございます。 setIntervalでもできますよね。困っている点は、今のコーディングですと、コンソールにしか表示されないので、ブラウザに表示させるためにはどのようにコーディングすればいいのか、、、ご存知でしたら、教えてください。

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

JavaScript
1  var count = 10;
2  var countdown = function(){
3    document.getElementById('timer').textContent = count.toString();
4    console.log(count--);
5    var id = setTimeout(countdown, 1000);
6    if(count < 0){
7      clearTimeout(id);
8    }
9  }
10  countdown();