前提・実現したいこと

jsで任意の時間のカウントダウンタイマーを作っています。
HTMLのナンバーインプットで計りたい時間を入力してスタートボタンを押すとその時間でカウントダウンが開始するようにしたいです。
どのように書き直せば入力した値を取得できるでしょうか。

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

入力した時間を取得できていない模様。

該当のソースコード

html
1   <!DOCTYPE html>
2<html lang="ja">
3 <head>
4  <meta charset="utf-8">
5  <title></title>
6  <link rel="stylesheet" href="css/style.css">
7  <script src="js/main.js"></script>
8
9 </head>
10
11 <body>
12  <div id="timer">
13    <h1>Timer</h1>
14    <p>
15      <span id="min">0</span> 分
16      <span id="sec">0</span> 秒
17    </p>
18    <p>
19      <input type="button" id="start" value="START">
20      <input type="button" id="stop" value="STOP" disabled>
21      <input type="button" id="reset" value="RESET">
22      <input type="number" id="time">
23    </p>
24  </div>
25
26 </body>
27</html>
28

javaScript
1  
2window.onload = function(){
3  var counter;
4
5  var start = document.getElementById("start");
6  var stop = document.getElementById("stop");
7  var reset = document.getElementById("reset");
8  var min = document.getElementById("min");
9  var sec = document.getElementById("sec");
10  var time = document.getElementById("time");
11
12
13
14  start.onclick = function(){
15    time = document.getElementById("time");
16    counter = setInterval(count,1000);
17    toggle();
18
19
20  }
21  stop.onclick = function(){
22    clearInterval(counter);
23    toggle();
24  }
25  reset.onclick = function(){
26    time = 0;
27    sec.innerHTML = time % 60;
28    min.innerHTML = Math.floor(time / 60);
29  }
30
31
32  function toggle(){
33    if( start.disabled){
34      start.disabled = false;
35      stop.disabled = true;
36    } else {
37      start.disabled = true;
38      stop.disabled = false;
39    }
40  }
41
42  function count() {
43
44    if( time === 0) {
45      sec.innerHTML = 0;
46      min.innerHTML = 0;
47      toggle();
48      alert("3分経過しました。");
49      clearInterval(counter);
50    } else {
51      time -= 1;
52      sec.innerHTML = time % 60;
53      min.innerHTML = Math.floor(time / 60);
54    }
55  }
56}
57

試したこと

time = 180 のように直接時間を入力した場合、正常に機能します。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Orlofsky

2019/10/28 10:29

コードは https://teratail.com/help/question-tips#questionTips3-7 の [コード] に修正してください。

sabiki-taro

2019/10/28 10:35

失礼しました。アドバイスありがとうございます。修正しました。

yambejp

2019/10/28 12:22 編集

「ナンバーインプットで計りたい時間を入力」のくだりがよくわかりません手動もしくは▲▼で入力すればいいのでしょうか？ start/stop/resetの機能はどうなっているのでしょか？

sabiki-taro

2019/10/28 12:34

説明が下手ですみません。手動等で任意の数字を設定できるようにしたいです。 start等の機能は正常に動きますが、設定した数字に関係なく-１分-１秒からカウントダウンが始まってしまいます。

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

回答1件

ベストアンサー

ちょっと状況がわからないのでとりあえずここから

timeが0より大きいときstartボタンが押せる
startを押すとtimeがカウントダウンして0になるととまる
カウントダウン中、timeが0より大きいときstopが押せ、押すとカウントがとまる
resetを押すと当初任意で入力した値にtimeが戻る

動作が違うようなら指示ください

javascript
1<script>
2var timerId;
3var defaultTime=0;
4window.addEventListener('DOMContentLoaded', ()=>{
5  const start=document.querySelector("#start");
6  const stop=document.querySelector("#stop");
7  const reset=document.querySelector("#reset");
8  const time=document.querySelector("#time");
9  start.addEventListener('click',()=>{
10    start.disabled=true;
11    stop.disabled=false;
12    reset.disabled=true;
13    timerId= setInterval(countdown=()=>{
14      var v=parseInt(time.value);
15      v--;
16      if(v<=0){
17        clearInterval(timerId);
18        stop.disabled=true;
19        reset.disabled=false;
20      }
21      time.value=v;
22      return countdown;
23    },1000);
24  });
25  stop.addEventListener('click',()=>{
26    clearInterval(timerId);
27    start.disabled=false;
28    stop.disabled=true;
29    reset.disabled=false;
30  });
31  reset.addEventListener('click',()=>{
32    start.disabled=false;
33    reset.disabled=true;
34    time.value=defaultTime;
35  });
36  time.addEventListener('input',()=>{
37    defaultTime=parseInt(time.value);
38    start.disabled=parseInt(time.value)<=0;
39  });
40});
41</script>
42<p>
43<input type="button" id="start" value="START" disabled>
44<input type="button" id="stop" value="STOP" disabled>
45<input type="button" id="reset" value="RESET" disabled>
46<input type="number" id="time" min="0" max="180" value="0">
47</p>

分・秒の表示

javascript
1<script>
2var timerId;
3var defaultTime=0;
4window.addEventListener('DOMContentLoaded', ()=>{
5  const start=document.querySelector("#start");
6  const stop=document.querySelector("#stop");
7  const reset=document.querySelector("#reset");
8  const min=document.querySelector("#min");
9  const sec=document.querySelector("#sec");
10  const time=document.querySelector("#time");
11  start.addEventListener('click',()=>{
12    start.disabled=true;
13    stop.disabled=false;
14    reset.disabled=true;
15    timerId= setInterval(countdown=()=>{
16      var v=parseInt(time.value);
17      v--;
18      if(v<=0){
19        clearInterval(timerId);
20        stop.disabled=true;
21        reset.disabled=false;
22      }
23      time.value=v;
24      min.textContent=parseInt(v/60);
25      sec.textContent=v%60;
26      return countdown;
27    },1000);
28  });
29  stop.addEventListener('click',()=>{
30    clearInterval(timerId);
31    start.disabled=false;
32    stop.disabled=true;
33    reset.disabled=false;
34  });
35  reset.addEventListener('click',()=>{
36    start.disabled=false;
37    reset.disabled=true;
38    time.value=defaultTime;
39    min.textContent=parseInt(defaultTime/60);
40    sec.textContent=defaultTime%60;
41  });
42  time.addEventListener('input',()=>{
43    min.textContent=parseInt(time.value/60);
44    sec.textContent=parseInt(time.value)%60;
45    defaultTime=parseInt(time.value);
46    start.disabled=parseInt(time.value)<=0;
47  });
48});
49</script>
50<p>
51<span id="min">0</span> 分
52<span id="sec">0</span> 秒
53</p>
54<p>
55<input type="button" id="start" value="START" disabled>
56<input type="button" id="stop" value="STOP" disabled>
57<input type="button" id="reset" value="RESET" disabled>
58<input type="number" id="time" min="0" max="180" value="0">
59</p>