change div content and refresh div when press keyboard key

Question

I have a div with images. I want to hide those images when I press key on key board. How can I do that?

<div>
    <span role="checkbox" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        
    </span>
    </div>
    <div>
    <span role="checkbox" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        
    </span>
    </div>
    <div>
    <span role="checkbox" aria-checked="false" tabindex="0">
        <img src="unchecked.gif" role="presentation" alt="" />
      
    </span>
    </div>

This is div with content. I want to hide these images on keypress event..!

You need javascript for that. There are multiple questions that should help you to solve your problem. Such as [this answer](https://stackoverflow.com/a/16089470/2412895) or [this answer](https://stackoverflow.com/questions/2554149/html-javascript-change-div-content) ect — KarelG, Jun 16 '17 at 06:35
HTML is for content, CSS is for styling, Javascript is for interactivity. You've got HTML, now you need Javascript. — Clonkex, Jun 16 '17 at 06:39

score 0 · Answer 1 · answered Jun 16 '17 at 06:35

Try with keypress event

$(document).on('keypress',function(){
$('img').hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />

</span>
</div>
<div>
<span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />

</span>
</div>
<div>
<span role="checkbox" aria-checked="false" tabindex="0">
    <img src="unchecked.gif" role="presentation" alt="" />

</span>
</div>

wow.. its worked. – Buddhika Priyabhashana Jun 16 '17 at 07:09 — Buddhika Priyabhashana, Jun 16 '17 at 07:09

score 0 · Accepted Answer · answered Jun 16 '17 at 06:36

Listen for keyup event and than .hide() elements.

$(document).ready(function () {
  $('body').keyup(function () {
    $('.img').fadeToggle();
    //$('.img').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="false" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>

What the problem with that code is, that the animation gets queued when you spam a key. So it continues to fade in and out after you stopped pressing a key. You can fix that simpy by adding `stop()`. So line 3 of your JS looks like this: `$('.img').stop().fadeToggle();` — Tobias Glaus, Jun 16 '17 at 08:54

change div content and refresh div when press keyboard key

2 Answers2