JavaScriptの2イベント間の時間を計算します

Question

私は現在Javascriptで初心者コースをやっており、本質的に反応タイマーである非常に基本的なプロジェクトに取り組んでいます。ランダムな形状（四角または円のみ）がランダムな間隔でランダムな位置に表示され、ユーザーがクリックする必要があるという考え方です。

は、ここで私がこれまで持っているものです。

document.addEventListener("DOMContentLoaded", function() { 
 
    var shape = document.getElementById("shape"); 
 

 
    function generateRandomShape() { 
 
    console.log("TEST"); 
 
    var shapeType = ["50%", ""]; 
 
    var shapeColor = ["red", "green", "yellow", "purple", "orange", "brown", "gray", "black", "blue"]; 
 

 
    shape.classList.remove("disappear"); 
 
    shape.style.backgroundColor = shapeColor[Math.floor(Math.random() * shapeColor.length)]; 
 
    shape.style.height = Math.random() * 300 + "px"; 
 
    shape.style.width = shape.style.height; 
 
    shape.style.borderRadius = shapeType[Math.floor(Math.random() * shapeType.length)]; 
 
    shape.style.marginLeft = Math.random() * 700; 
 
    shape.style.marginTop = Math.random() * 300; 
 
    } 
 

 
    shape.onclick = function() { 
 
    var endTime = Date.now(); 
 
    var randomDelay = Math.random() * 3000; 
 
    var startTime = endTime - randomDelay; 
 
    var reaction = (endTime - startTime)/1000; 
 

 
    setTimeout(generateRandomShape, randomDelay); 
 
    shape.className = "disappear"; 
 

 
    document.getElementById("end").innerHTML = endTime; 
 
    document.getElementById("start").innerHTML = startTime; 
 
    document.getElementById("reactionTime").innerHTML = reaction; 
 
    } 
 
    
 
    generateRandomShape(); 
 
});

.disappear { 
 
    display: none; 
 
}

<h1>Test Your Reactions!</h1> 
 
<p>Click on the boxes and circles as quickly as you can!</p> 
 
<p>Your time is: <span id="reactionTime"></span> seconds</p> 
 
<div id="shape"></div> 
 
<div id="start"></div> 
 
<div id="end"></div> 
 
<div id="reactionTime"></div>

それはすべてが反応タイマーを除くOK動作し、私はこの作業を取得する方法を考え出すことはできません。私は図形をクリックしてendTime変数を作成していますが、startTime変数の周りに頭を浮かべることはできません。どのようにシェイプが現れた時間を保存するのですか？明らかに私のここでの試みはうまくいかず、なぜ私は簡単に見ることができますが、私は何を入れなければならないのか分かりません。どのような助けが大いに感謝！

Answer 1

シェイプとシェイプイベントリスナーを同じスコープで作成してください。あなたのランダムな形状を生成するときに、同じスコープで

、showTimeを追跡するために、2つの変数を作成し、clickTime ... HTMLを取り込み、その後、イベントリスナーの内側にあなたのクリックの時間を設定し、あなたのshowTimeを設定します。

var showTime, 
    clickTime; 

function generateShape() { 
    showTime = Date.now(); 
    ... 
} 

... 

shape.onClick = function() { 
    clickTime = Date.now(); 
    document.getElementById('reactionTime').innerHTML = clickTime - showTime; 
    ... 
} 

Answer 2

あなたのコード：そこにはDOM要素は、ID = "終わり" ではありませんとid = "開始"、ので、あなたのonclickの機能は、ちょうどそこに失敗します。このエラーは、デバッグコンソールに表示されている必要があります。常識を使用して

はあなたの問題を解決するのに十分です：

1. あなたの形状が作成されるたびに開始時刻値を格納します。一度に複数の図形を表示したい場合は、グローバル変数では不十分です。それはあなたの好みに依存しますが、より良いアプローチは、あなたがそれをクリックする形状からそれを取得することができDOM属性として時間値を格納することです。
2. クリックすると別の時刻値を生成し、2つの時刻値の差を求めて画面に表示します。

最初にコアロジックを作成してから、簡単にアプリケーションをデコレートすることをおすすめします。

/* HTML: 
<h1>Test Your Reactions!</h1> 
<p>Click on the boxes and circles as quickly as you can!</p> 
<p>Your time is: <span id="reactionTime">0</span> seconds</p> 
<div id="shape">Click me!</div> 
*/ 
var shape = document.getElementById("shape"); 
var reactionResult = document.getElementById("reactionTime"); 

function generateRandomShape() { 
    // make the shape appear again 
    shape.classList.remove("disappear"); 
    // store creation time as attribute "start-time" 
    shape.setAttribute("start-time", new Date().toISOString()); 
    // decorate or change your shape style here ... 
}; 

shape.onclick = function() { 
    // make the shape disappear 
    shape.className = "disappear"; 
    // retrieving creating time from attribute "start-time" 
    var startTime = new Date(shape.getAttribute("start-time")); 
    // calculate reaction time 
    var reactionTime = new Date() - startTime; 
    // displaying reaction time 
    reactionResult.innerHTML = reactionTime/1000; 
    // creating next shape in random time 
    var randomDelay = Math.random() * 3000; 
    setTimeout(generateRandomShape, randomDelay); 
}; 

generateRandomShape(); 

：ここに私のソリューションです