如何在特定操作发生后添加onclick事件处理程序?

时间:2016-07-06 22:36:28

标签: javascript html css button

我想在单击第一个按钮后才启用第二个按钮。我想要启用的按钮是JS中的start变量。我就这样做了:

<!--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事件,但它不起作用。单击按钮时没有任何反应。我该如何解决这个问题?

1 个答案:

答案 0 :(得分: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(); 
 });
}

之前没有使用它的原因是因为你的原始脚本只在你加载页面时运行一次,那时shadow就是0.这就是事件处理程序如此方便的部分原因。 / p>