CODEWITHSUNDEEP
javascriptevents
Matthew
Matthew

Reputation: 13

Keydown event does not fire a function

I've made a simple code which should change visibility of box while certain key is pressed,but something is wrong because whichever button will be pressed it always says it's wrong.

This should work only while "f" key is pressed,right now it doesn't work at all...

const brick = document.querySelector('.brick');

window.addEventListener('keydown',function(e)
{ 
    e.preventDefault();

    if(e.keycode == 70)
    {
        let x = event.keyCode;
        console.log(x);
        brick.style.visibility = "visible";    
    } else {
        let x = e.keyCode;
        console.log(x);
        console.log("You've pressed wrong button")
        brick.style.visibility ="hidden";
    }

});

Code is Here

I know i can use jquery but i would like to do this in pure JS

Greets

Upvotes: 0

Views: 895

Answers (2)

Deepu Reghunath
Deepu Reghunath

Reputation: 9653

This may helpful . After run the code press key "F" in the keyboard to see the red div

const brick = document.querySelector('.brick');
window.addEventListener('keydown',function(e)
{ 
        e.preventDefault();
        let x = e.keyCode;           
         if(x == 70)
         {
            
            //console.log(x);
            brick.style.visibility = "visible";                     
                    
        }            
         else
        {           
            //console.log(x);
            //console.log("You've pressed wrong button")
             brick.style.visibility ="hidden";
         }
            
  });
.brick
    {
        width:100px;
        height:100px;
        visibility: hidden;
        background-color: red;
        display:block;
    }
 <div class="brick" >
        
 </div>

Upvotes: 0

Stuart
Stuart

Reputation: 6785

Slight syntax error:

if(e.keycode == 70)

should be:

if(e.keyCode == 70)

Notice the capital C.

Upvotes: 1

Related Questions