CODEWITHSUNDEEP
javascript
Kberg
Kberg

Reputation: 11

Remove image when clicked

Basically, I'm trying to create a game where the goal is to click on images so they disappear.

I've made a function that spawns one image on a random location on the screen. Then I've also made an interval so it spawns 15 images in random locations. Now I want the images to disappear when clicked on.

My thoughts on doing this were to make a "click" function, so if the images are clicked the "img.style.height = '0px';

However, I'm not getting this or anything to work.

Upvotes: 1

Views: 129

Answers (2)

Saeed
Saeed

Reputation: 5488

After you insert all images in document, define a click listener for all images and hide images on click. A simple example here

function hide(el) {
  el.style.display = 'none';
}

var imgs = document.getElementsByTagName("img");

for(let i = 0; i < imgs.length; i ++) {
imgs[i].addEventListener('click', function(e) {
  hide(e.target);
});
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgYxw854mGOAp8f16evj_WYw_Ph385nUVygQdxHvuD9b3ueJxT0A" id="1" alt="Mountain View 1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8_MiTkMX9nLJ9udtnwOQekIrQwUQ9KMZiU4fLfI7YhXCyIGZn" id="2" alt="Mountain View 2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgR4KM-zrVRmfdGPf5bll9vq4uLw7FSLpTmHUf9-RkYZ92Ey8Q" id="3" alt="Mountain View 3">

Your code should change like this

function SpawnW() {
  var img = document.createElement("img");
  img.setAttribute("style", "position:absolute;");
  img.setAttribute("src", "women3.png");
  document.body.appendChild(img);
  img.setAttribute("onclick", "this.style.display = 'none'");
  // pictureNumber++;
}

SpawnW();

Hope this helps you.

Upvotes: 1

user2314737
user2314737

Reputation: 29427

Use 

<img onclick="this.style.visibility = 'hidden'" src="..." />

if you want to leave the space occupied by the image, otherwise:

<img onclick="this.style.display = 'none'" src="..." />

If you need to remove the image from an array of objects, you need to define a function as well.

In your code: 

img.setAttribute("onclick", "this.style.visibility = 'hidden'" );

or

img.setAttribute("onclick", "this.style.display = 'none'" );

Upvotes: 1

Related Questions