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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1177閲覧

なぜNANになるのか、理由を教えてください。

sabiki-taro

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/11/17 14:48

現在、カウントダウンタイマーのプログラムを作成しています。

起こっている問題は、ナンバーフォームで時間を入力した後、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

setTime = Number(setTime.value); の部分で、setTime = document.getElementById('setTime')を上書きしているため、2回目は使えません。

setTime = Number(setTime.value); という記述を削除して、
time += Number(setTime.value);とすればNaNにはならないと思います。

投稿2019/11/17 14:56

kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sabiki-taro

2019/11/17 15:05

早い回答ありがとうございました。お陰様で正常に動きました。 なるほど、setTime = Number(setTime.value); で最初に定義していたものが代わってしまったんですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問