Question 288110 in Javascript Question posted in
A very good W3school tutorial can be found here.

Creating a temporary image when a key is pressed in Javascript

I’m working on a personal website for fun, and I want to add an easter egg where if you press "e" anywhere while on the site, a little image of a speech balloon will appear for a bit and then disappear. It’d be fun if it could make a noise or appear randomly on the page as well but really I just want to get it working at all. I’m not very familiar at Javascript sadly.

So far I’ve looked around and I found things showing an image on a click, and translating a key press into triggering a click event, but I can’t seem to string them together right… I feel like I’ve gone through a bunch of methods and ended up scrapping all of them. I’ve looked into scripts that create images on a click but I don’t know how to translate that into a keypress.

This is what I currently have. As far as I understand it, I set up a listener event to look for when the key is pressed, and then it runs the function showImage that changes the display for the div from none to block. But when I press E nothing happens.

<script>
var addEvent = document.addEventListener ? function(target,type,action){
    if(target){
        target.addEventListener(type,action,false);
    }
} : function(target,type,action){
    if(target){
        target.attachEvent('on' + type,action,false);
    }
}

addEvent(document,'keydown',function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===101){
        showImage();
    }
});

const showImage = () => {
        document.getElementById("first").style.display ='block';
    }
</script>

<body>
<div id="first" style="height:400px; width:400px; display:none;">
    <img src="test.png"> 
</div>
</body>
Tags:

3

Answers


  1. 0

    If you want to show an image after pressing a key you can do as follows:

    // Create the event
document.addEventListener("keyup", (event)=>{
// Check if the key is the one you want
  if (event.key == "e")
  {
    // Get the image
    const img = document.querySelector("#your_img");

    // Set display to initial to show the image
    img.style.display = "initial";
  }
});

    Keep in mind that, getting the image right after pressing the key, sometimes is not a good way to go, because you are calling the DOM everytime you press the key, but, as this is an easter egg I’m guessing not too many peaople will press on this key several times, therefore you can leave it as it is.

    Login or Signup to reply.
  2. 0

    okay I’m not really sure what the code before the showImage function does, so
    I’d suggest you try this…

    <script>

     const showImage = () => {
        document.getElementById("first").style.display ='block';
    }
    // Function to be called when any key is pressed
    function keyPressed(event) {
        // Check if the pressed key is "E"
        if (event.key === "E") {
            showImage();
        }
    }

    // Add event listener for the 'keyup' event
    document.addEventListener("keyup", keyPressed);
</script>
    Login or Signup to reply.
  3. 0

    Let’s start by adding a reasonable event handler. The code you have includes some workarounds that haven’t been needed in a very, very long time. Try something like this:

    document.addEventListener('keydown', e => {
  console.log(e);
});

    Now, if you look at your browser’s developer console, click back on the page, and then type a key, you’ll start seeing keyboard events on the console.

    Let’s set up an element on the page that will be hidden. We’ll include both an image, and some audio:

    <div class="hidden" data-key-code="KeyE">
  <img src="https://i0.wp.com/acegif.com/wp-content/gif/confetti-40.gif" />
  <audio src="https://actions.google.com/sounds/v1/crowds/female_crowd_celebration.ogg" />
</div>

    Somewhere in your CSS, also add this utility rule:

    .hidden {
  display: none;
}

    When the page loads, your hidden element won’t be visible, due to display: none. Back to JavaScript, where we can handle keyboard events.

    You’ll see in the HTML we added a data attribute for the key code. This makes it easy to change your key code you want to catch in the future by just changing the HTML. It also means that you can add several of these to your page without having to modify the JavaScript. Our script code will look like this:

    document.addEventListener('keydown', e => {
  // Get the element we want, if there is any.
  const el = document.querySelector(`[data-key-code="${e.code}"]`);

  // No element found?  Return, do nothing.
  if (!el) {
    return;
  }

  // Toggle whether or not the element is hidden
  el.classList.toggle('hidden');

  // If the element is now hidden, pause the audio.  Otherwise, play it.
  el.querySelector('audio')[
    el.matches('.hidden') ? 'pause' : 'play'
  ]();
});

    You can play with a working example here: https://jsfiddle.net/fqaogu59/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search