CODEWITHSUNDEEP
javascripthtml
Daniel Levin
Daniel Levin

Reputation: 1

Javascript image removal and append

I have a container with a total of 16 images of balloons. I want to remove each image when hovering over dem and replacing each with an image that says pop. When I remove the first image with "click" it works fine, but when I remove the second balloon image, the pop image that was appended first is removed, and so on. In my image folder, I have balloon images and pop images

html (only 4 images included here for simplicity):

<div class="row first-row">
  <div  class="col-3" id="red-div" >
      <img class = "balloon" src="./images/balloon-red.png" id="red"/>
    </div>
    <div  class="col-3" id="blue-div" >
      <img class = "balloon" src="./images/balloon-blue.png" id="blue"/>
    </div>
    <div class="col-3" id="pink-div" >
      <img class = "balloon" src="./images/balloon-pink.png" id="pink"/>
    </div>
    <div class="col-3" id="white-div">
      <img class = "balloon" src="./images/balloon-white.png" id="white"/>
    </div>  
  </div>
</div>


<script>
    const images = document.querySelectorAll("img");
    console.log(images)
    let popImage = document.createElement("img");
    function removeImage(image) {
      image.remove();
    }
    function appendImage(image) {
      popImage.setAttribute("src", `./images/pop-${image.getAttribute("id")}.png`);
      image.parentNode.appendChild(popImage);
    }
    images.forEach((image) => {
     image.addEventListener(
        "click", e=> {
          appendImage(image);
          if(image.className =="balloon"){
            console.log(image.className)
            removeImage(image);
           // e.stopPropagation();
          } 
        }
      );
    });
</script>

Upvotes: 0

Views: 34

Answers (1)

vanowm
vanowm

Reputation: 10221

The problem is that you are moving popImage instead of creating a new one each time. Simply move let popImage = document.createElement("img"); into appendImage() function:

const images = document.querySelectorAll("img");
    console.log(images)
    function removeImage(image) {
      image.remove();
    }
    function appendImage(image) {
      let popImage = document.createElement("img");
      popImage.setAttribute("src", `https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj
`);
      image.parentNode.appendChild(popImage);
    }
    images.forEach((image) => {
     image.addEventListener(
        "click", e=> {
          appendImage(image);
          if(image.className =="balloon"){
            console.log(image.className)
            removeImage(image);
           // e.stopPropagation();
          } 
        }
      );
    });
img
{
  width: 100px;
}
<div class="row first-row">
  <div  class="col-3" id="red-div" >
      <img class = "balloon" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" id="red"/>
    </div>
    <div  class="col-3" id="blue-div" >
      <img class = "balloon" src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj" id="blue"/>
    </div>
    <div class="col-3" id="pink-div" >
      <img class = "balloon" src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w1024-h683-n-l50-sg-rj" id="pink"/>
    </div>
    <div class="col-3" id="white-div">
      <img class = "balloon" src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj" id="white"/>
    </div>  
  </div>
</div>

However, unless there is a good reason for removal of the original img element, a better approach would be simply replace src instead.

Upvotes: 1

Related Questions