QA@IT

【初心者】Javascript勉強し始めたばかりです。HTMLとJSでタイマーを作ってみたのですが、躓きました。

4194 PV

タイトル通り、初心者なため、低レベルな質問ですがお許し下さい。

「10分、5分、3分」の3つのボタンを作り、それぞれを押すと、その秒数がセットされ、STARTを押すとカウントが始まる仕様のものを作りたいと思っていました。
確かに1度、10分のボタンを押すとセットされ、動作するのですが、改めて5分や3分のボタンを押すと、「NaN分 NaN秒」と表示されてしまいます。リロードしないと使えません。

かれこれ数日間躓いています。一度忘れて勉強を続けようと思ったのですが、もやもやするため、質問させて頂いております。勉強の仕方、躓いたときの対処などもアドバイス頂けたら幸いです。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>

    <meta charset="UTF-8">
    <title>TIMER2</title>
    <script src="timer2.js"></script>

    <body>
        <div id="timer">
    <h1>TIMER2</h1>

        <p>
            <span id="min">0</span><span id="sec">0</span></p>

        <p>
            <input type="BUTTON" id="tenmin" value=10min>
            <input type="BUTTON" id="fivemin" value=5min>
            <input type="BUTTON" id="threemin" value=3min>
        </p>

        <p>
            <input type="BUTTON" id="start" value=START>
            <input type="BUTTON" id="stop" value=STOP>

        </p>

        </div>
    </body>
</head>
</html>

JS
window.onload=function(){

        var time = new Array(2);
        time[0]=600;
        time[1]=300;
        time[2]=180;
    var counter;

    var min = document.getElementById("min");
    var sec = document.getElementById("sec");
    var start = document.getElementById("start");
    var stop = document.getElementById("stop");

    var tenmin = document.getElementById("tenmin");
    var fivemin = document.getElementById("fivemin");
    var threemin = document.getElementById("threemin");

    tenmin.onclick = function(){ 
        time=time[0];
        min.innerHTML=Math.floor(time/60);
        sec.innerHTML=time%60;
    }

    fivemin.onclick = function(){
        time=time[1];
        min.innerHTML=Math.floor(time/60);
        sec.innerHTML=time%60;
    }

    threemin.onclick = function(){
        time=time[2];
        min.innerHTML=Math.floor(time/60);
        sec.innerHTML=time%60;
    }

    start.onclick = function() {
            toggle();
            counter = setInterval(count, 1000);
        }

    stop.onclick = function(){
            toggle();
            clearInterval(counter); 
        }



    function count(){
            if(time===0){
                min.innerHTML=0;
                sec.innerHTML=0;
                alert("done");
                clearInterval(count);
            }else{

                time -= 1;
                min.innerHTML=Math.floor(time/60);
                sec.innerHTML=time%60;
            }
        }

    function toggle(){

        if(start.disabled){
            start.disabled=false;
            stop.disabled=true;
        }else{
            start.disabled=true; 
            stop.disabled=false; 
            }

    }
}

回答

肝心な質問が抜けていました。
10min,5min,3minのボタンを続けて押しても、新しくセットし直せるようにするためには、どうしたら良いか教えてください。根本的に違っているところがあれば教えて欲しいです。

編集 履歴 (0)
  • コードの全てはしっかり見てませんけど、new Array(2); の 2 はそれでいいのでしょうか? getElementById("reset"); の reset が見当たりませんが。 -
  • new Arrayに関しては、あまり意味がわかってない状態で使っていました(配列?)。var time = [600,300,180]に差し替えても、同じ状態になってしまいます。

    resetは、申し訳ありませんが、消し損じなので無視してください。3分きっちりと図るタイマーを作った際の名残でした。消して動かしても、状況は変わらずです..。
    -
  • そこまで書くなら、コピペすれば動かして検証できるようにしていただけませんか? 中途ハンパなコードをアップするのはもっとも悪いことだと思いますよ。 -
  • いい忘れましたが、コードをアップする際は、問題を再現できる必要最小限に削っていただくようお願いします。その過程で問題の箇所を発見できて自己解決できれば、質問者さんのスキルアップにもつながると思いますので。 -
  • SurferOnWwwさん。ありがとうございます。ここまで書くのであれば、すべて貼り付けるべきでした。このたびは申し訳ありませんが、とりあえずフルで貼らせてください。以後、必要最小限に削って質問することを心掛けます。 -

一番の問題は変数 time の使い方です。

スクリプトの最初に time は配列として初期化されているのに、後のほうで time=time[0]; などどするのは間違っていることがわかりますでしょうか?

例えば、var t = 0; という宣言を追加し、time=time[0]; の左辺(誤記訂正: 右辺 ⇒ 左辺)その他の場所で多々使われている time を t に書き換えると動くと思います。

それから、配列 time の要素数は 3 つなので new Array(2) ではなく new Array(3) が正解です。

Array
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

編集 履歴 (1)
  • SurferOnWwwさん。お手数おかけして申し訳ありませんでした。とてもよく理解できました!new Arrayについても0からカウントするから(2)なのかなと思っていましたが、ご指摘いただいて感謝します。 -
  • 今さらながらですが、もうひとつ間違いを見つけました。count 関数の中で clearInterval(count); ⇒ clearInterval(counter); のはずです。
    -
  • その通りでした。ありがとうございます。頑張って勉強を続けたいと思います! -
ウォッチ

この質問への回答やコメントをメールでお知らせします。