how to add image to screen at the press of keyboard "enter" click?

Question

I am trying to add an image to my screen at the press of the "enter" key, but am unable to do so. I am currently using Raphael JavaScript library. I tried to use event.which == 13 but it does not work. There was no error on the console.

picture of code

Answer 1

The following code pattern should work for you. I will have a div with some text (you can replace this with your image) and I will assign an event handler of keypress to the whole document body.

document.body.addEventListener("keypress", function(ev) {

// note that we use 'ev' as opposed to 'event', since we named the param 'ev'.

    if (ev.which === 13) {
        document.getElementById("img").style.display = "block";
    }

}); 

<div id="img" style="display:none">Hidden Image</div>

Basically the event is added to the document body so we know it will trigger regardless of the user's focus. But you can change this to the particular element later during your tests.

Also it is important to use the parameter name you passed in consistently to the event handler. So when passing in ev, use spelling ev as opposed to some other name (e.g. event) when you make use of it in the handler function.

One last note is from comments on when I said:

.style.display does not have a property value of visible. Instead set the value to block or inline-block. But if the element in question really is of visibility then use .style.visibility = "visible"

These corrections hopefully fix your problem or provide you with insights to get it solved.