特定のアクションが発生した後にonclickイベントハンドラを追加する方法はありますか？

Question

最初のボタンをクリックした後にのみ、2番目のボタンをクリックできるようにします。私が有効にしたいボタンは、JSの開始変数です。これは私がそれをやった方法です。ここで

<!--One of these "buttons" has to be clicked to enable clicking of another one--> 
<li id="easy" class="list" onclick="shadows(1)">Easy</li> 
<li id="medium" class="list" onclick="shadows(2)">Medium</li> 
<li id="hard" class="list" onclick="shadows(3)">Hard</li> 
<!--it goes to another function shadows()--> 

は関数である。

function shadows(number){ 
start.style.cursor="pointer"; 
shadow=1;//I set a variable to 1(It was previously 0) 

start.style.backgroundColor="#ffffb3"; 
start.onmouseenter=function(){ 
    start.style.backgroundColor="yellow"; 
}; 
    start.onmouseleave=function(){ 
    start.style.backgroundColor="#ffffb3"; 
}; 

} 

私は後でシャドウ変数が1

if(shadow==1){ 
start.onclick=function(){ 
easy.style.display="none"; 
medium.style.display="none"; 
hard.style.display="none"; 
randomExercise(); 
}; 
} 

であるかどうかを確認私はonclickのイベントを追加しようとしたが、それ動作しません。ボタンをクリックしても何も起こりません。これをどうすれば解決できますか？あなたの影に

Answer 1

は、あなたがそうのようなイベントリスナーを追加することができます機能：

function shadows(number){ 
start.style.cursor="pointer"; 

start.style.backgroundColor="#ffffb3"; 
start.onmouseenter=function(){ 
    start.style.backgroundColor="yellow"; 
}; 
    start.onmouseleave=function(){ 
    start.style.backgroundColor="#ffffb3"; 
}; 

start.addEventListener("click", function(){ 
    easy.style.display="none"; 
    medium.style.display="none"; 
    hard.style.display="none"; 
    randomExercise(); 
}); 
} 

ページをロードするときに、元のスクリプトが一度だけ実行されるため、あなたはそれの前にある持っていたか、それが機能しなかった理由は、その時点で影は0でした。これは、イベントハンドラがとても便利な理由の一部です。