How to only make my two images appear only once?

JavaScript
1

Just want to see my images displaying once when I click button and if I click button again don’t make anything appear anymore.
CODE PEN HERE:
https://codepen.io/josemon322/pen/RwyNNYE

1 Like
2

So you want your button to work only once, correct?

3

yeah just once, I did manage to make it wok using a for loop and call the images straight from the index file through classes but I was wondering how to do it using an array.

4

Just to clarify again, because I believe your response is still open for interpretation: you want the button to do something only the first time it is clicked, then never again. Provided this is true:

One way is to stop listening to the clicks after the first time. (Your function can use the removeEventListener to do that).

Another way possibly is to use the array index to create unique img element ids then check for those each time. For eg. If the first time you created img with id=“img0”, next time you can look for img0 before you add anything to the DOM. If it exists, move to the next image/index, etc).

5

thanks for your help I think I manage to make it work removing the event listener but now I don’t know why after I click the button the style on the button changes to some sort of greyCODEPEN

6

Try looking at the button in developer tools. I bet it has become disabled.

7 
button.disabled = true;

This makes the button disabled which causes the button to change to the grey color you reference.

8

Thanks now works fine.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.