2回のクリックの差がこのコードでうまくいきませんでした

Question

私はjavascriptを初めて使ったので、この質問をしています。 「キー」を押してから9秒の時間間隔で「ハッシュ」キーが押されても警告が「ロックされていない」ようにしたいのですが、期待どおりに機能していません。

document.getElementById("key").addEventListener("click",function(){ 
 
alert("enter # to unlock"); 
 
var time = (new Date()).getTime(); 
 
    //alert(time); 
 
}); 
 

 
document.getElementById("hash").addEventListener("click",function(){ 
 
    var keytime = (new Date()).getTime(); 
 
    //alert(keytime); 
 
    var diff = time - keytime; 
 
    alert(diff); 
 
    if(diff <= 9000){ 
 
    alert("unlocked"); 
 
    } 
 
    else{ 
 
    alert("try again"); 
 
    } 
 
    
 
    });

<button id="key">key </button> 
 
<button id="hash">#</button>

Answer 1

timehashイベントリスナーがアクセスできるように、グローバル変数でなければなりません。

var time = Infinity; 
 
document.getElementById("key").addEventListener("click",function(){ 
 
alert("enter # to unlock"); 
 
time = (new Date()).getTime(); 
 
    //alert(time); 
 
}); 
 

 
document.getElementById("hash").addEventListener("click",function(){ 
 
    var keytime = (new Date()).getTime(); 
 
    //alert(keytime); 
 
    var diff = time - keytime; 
 
    alert(diff); 
 
    if(diff <= 9000){ 
 
    time = Infinity; 
 
    alert("unlocked"); 
 
    } 
 
    else{ 
 
    alert("try again"); 
 
    } 
 
    
 
    });

<button id="key">key </button> 
 
<button id="hash">#</button>

Answer 2

あなたは#keyクリックリスナーのスコープにtimeを初期化します。それは外に出ることはできません。

グローバル変数として外部に設定します。

Variable scope documentation

 
var time = 0; 
 

 
document.getElementById("key").addEventListener("click",function(){ 
 
    alert("enter # to unlock"); 
 
    time = (new Date()).getTime(); 
 
    //alert(time); 
 
}); 
 

 
document.getElementById("hash").addEventListener("click",function(){ 
 
    var keytime = (new Date()).getTime(); 
 
    //alert(keytime); 
 
    var diff = time - keytime; 
 
    alert(diff); 
 
    if(diff <= 9000){ 
 
    alert("unlocked"); 
 
    } 
 
    else{ 
 
    alert("try again"); 
 
    } 
 
    
 
    });

<button id="key">key </button> 
 
<button id="hash">#</button>

Answer 3

時間は現地VARです。あなたはこのようなグローバル変数を作成する必要があり、他の機能でそれにアクセスするための

：

var time; 
document.getElementById("key").addEventListener("click",function(){ 
alert("enter # to unlock"); 
time = (new Date()).getTime(); 
    //alert(time); 
}); 

document.getElementById("hash").addEventListener("click",function(){ 
    var keytime = (new Date()).getTime(); 
    //alert(keytime); 
    var diff = time - keytime; 
    alert(diff); 
    if(diff <= 9000){ 
    alert("unlocked"); 
    } 
    else{ 
    alert("try again"); 
} 

    });