Home/ Questions/Q 7610149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:21:00+00:00

So what the code is supposed to do is when a user clicks on

  • 0

So what the code is supposed to do is when a user clicks on the input field, and presses a key, after keyup then after 2 seconds the field is supposed to turn red. On key down it’s supposed to turn yellow. Then on keyup again, after 2 seconds it’s supposed to turn red.

Not sure why this isn’t working. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style>
  p { margin: 8px; font-size:16px; }
  .red { background:red;}
  .yellow { background:yellow;}
  .white {background: white;}
  </style>

</head>
<body>
 <form>
  <input id="target" type="text" />
</form>
<br /><br />

<script type="text/javascript">

$("#target").keyUp(function(){//STARTFUNCTION keyUp
if (  $('#target').hasClass("yellow")){//start if
  $('#target').removeClass("yellow");
  }//end if
  if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if

//after 2 seconds, add the class red
$("#target").delay(2000).queue(function(next){//start function
    $(this).addClass("red");
    //next();
}); //end function
}).keydown(function(event) {//start function
   if ( $('#target').hasClass("red")){//start if
  $('#target').removeClass("red");
  }//end if
   if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if
    $(this).addClass("yellow");
});//end function


</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is your file corrected:

    <!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style>
  p { margin: 8px; font-size:16px; }
  .red { background:red;}
  .yellow { background:yellow;}
  .white {background: white;}
  </style>

</head>
<body>
 <form>
  <input id="target" type="text" />
</form>
<br /><br />

<script type="text/javascript">

$("#target").keyup(function(){//STARTFUNCTION keyUp
if (  $('#target').hasClass("yellow")){//start if
  $('#target').removeClass("yellow");
  }//end if
  if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if

//after 2 seconds, add the class red
$("#target").delay(2000).queue(function(next){//start function
    $(this).addClass("red");
    //next();
}); //end function
}).keydown(function(event) {//start function
   if ( $('#target').hasClass("red")){//start if
  $('#target').removeClass("red");
  }//end if
   if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if
    $(this).addClass("yellow");
});//end function


</script>
</body>
</html>
    • 0