現在、カウントダウンタイマーのプログラムを作成しています。
起こっている問題は、ナンバーフォームで時間を入力した後、SETボタンを押したときの挙動です。ページを読み込んだ後、1度目は正常に動いてるように見えます。しかし、その後2度目以降は正常に動かず、secやminの表示がNANになります。
なぜ、2度目は正常に動かないのでしょうか。
問題になっているであろうコードはjsの時間をセットするプログラムの部分です。
html
1<!DOCTYPE html> 2<html> 3<head> 4<mata charset="UTF-8"></mata> 5<title>Timer</title> 6<link href="css/style.css" rel="stylesheet"> 7 8</head> 9<body> 10<header> 11 12</header> 13<main> 14<h1>Timer</h1> 15<div id="CountTimer"> 16 <h2>CountTimer</h2> 17 <p id=Timer> 18 <span id="min">0</span>分 19 <span id="sec">0</span>秒 20 </p> 21 <p> 22 <input type="button" id="start" value="START"> 23 <input type="button" id="stop" value="STOP" disabled> 24 <input type="button" id="reset" value="RESET"> 25 </p> 26 <p> 27 <input type="button" id="pra10" value="+10s"> 28 <input type="number" id="setTime" value="0" min="0" max="3600"> 29 <input type="button" id="mai10" value="-10s"> 30 </p> 31 <p> 32 <input type="button" id="set" value="SET"> 33 </p> 34</div> 35</main> 36<script src="js/main.js"></script> 37</body> 38</html>
JavaScript
1"use strict"; 2 3 let sec = document.getElementById('sec'), 4 min = document.getElementById('min'), 5 start = document.getElementById('start'), 6 stop = document.getElementById('stop'), 7 reset = document.getElementById('reset'), 8 counter, 9 pra10 = document.getElementById('pra10'), 10 mai10 = document.getElementById('mai10'), 11 setTime = document.getElementById('setTime'), 12 set = document.getElementById('set'), 13 time = 0; 14 15 16 /* 時間をセットするプログラム */ 17 set.onclick= function(){ 18 19 setTime = Number(setTime.value); 20 time += setTime; 21 sec.textContent = time % 60; 22 min.textContent = Math.floor( time / 60); 23 24 } 25 26 start.onclick = function(){ 27 toggle(); 28 counter = setInterval(count,1000); 29 } 30 31 stop.onclick = function(){ 32 toggle(); 33 clearInterval(counter); 34 } 35 36 reset.onclick = function(){ 37 time = 0; 38 sec.textContent = time % 60; 39 min.textContent = Math.floor( time / 60); 40 } 41 42 pra10.onclick = function(){ 43 time += 10; 44 sec.textContent = time % 60; 45 min.textContent = Math.floor( time / 60); 46 } 47 48 mai10.onclick = function(){ 49 time -= 10; 50 sec.textContent = time % 60; 51 min.textContent = Math.floor( time / 60); 52 } 53 54 function toggle() { 55 if(start.disabled) { 56 start.disabled = false; 57 stop.disabled = true; 58 } else { 59 start.disabled = true; 60 stop.disabled = false; 61 } 62 } 63 64 function count() { 65 if(time === 0){ 66 sec.textContent = 0; 67 min.textContent = 0; 68 alert('TIME UP'); 69 clearInterval(counter); 70 } else { 71 time -= 1; 72 sec.textContent = time % 60; 73 min.textContent = Math.floor(time / 60); 74 } 75 } 76
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/17 15:05