I want to replace my previous image with a new image everytime I click on my button, but it keeps adding new images instead

Everytime I click on I a button I want the existing image on my webpage to be replace with a new image similar what happens when you click a button on this page:
https://codepen.io/FlorinPop17/full/WNeggor

But instead, it just adds new images each time , rather than replace the existing one:

https://codepen.io/noblegas/pen/NWGjXpm

Hey Noblegas87!
Maybe the first thing the button does is replace the img with an empty string.
or
I’m not sure about the .appendChild(). Is there a method that’s the equivalent of .pop() for working with elements in the DOM?

The appendChild() is supposed to place the image tag that I created with javascript using the document.createElement method into the img-meal div container that is in my html code

Maybe try replaceChild()

(edit) ack - this requires two args (the old and the new). might not work

Kinda hacky but -
`…
button.addEventListener(‘click’,function(e){

image.innerHTML=’’;`

1 Like

image.innerHTML will equal an empty string or a semicolon??

would appendChild now work?

Yeah, that’s kinda confusing. The image.innerHTML is set to an empty string at the beginning of the function. The rest of the code as is - with the appendChild method - should work now.

That technique you suggested worked . Thanks