Select Image with Javascript and save ID-CodePudding

I have a div container with several images. I want the user to select an image (avatar) from the provided list. Each avatar image is uploaded and is accessible. Once the user selects it avatar I will save the location of the selected avatar to my database. What is the best way yo select the image. Is their an easy way to do this?

HTML

<div >
      <img src="images/gorillaAvatars/brownGorilla.png" id="brownGorilla">
      <img src="images/gorillaAvatars/gorilla.png" id="Gorilla">
      <img src="images/gorillaAvatars/greenGorilla.png" id="greenGorilla">
      <img src="images/gorillaAvatars/kidGorilla.png" id="kidGorilla">
      <img src="images/gorillaAvatars/surpriseGorilla.png" id="surpriseGorilla">

 </div>

CSS

<style>

 .image-container{
        width:60%;
        border: solid magenta 1px;
        padding: 5px;
        margin: 30px;
        display: flex;
        justify-content: space-evenly;
      }
    
      img{
        width:80px;
      }
      img:hover,
      img:focus,
      img:active{
        background-color: blue;
        border-radius: 20px;
      }
<style>

Javascript

const brownGorillaAvatar = "https://brownGorilla.png";
const mainGorillaAvatar ="https://gorilla.png"
const greenGorillaAvatar ="https://greenGorilla.png"
const kidGorillaAvatar ="https://kidGorilla.png"
const surpriseGorillaAvatar ="https://surpriseGorilla.png"

const avatar = [brownGorillaAvatar,mainGorillaAvatar,greenGorillaAvatar,kidGorillaAvatar, surpriseGorillaAvatar]

brownG.addEventListener('click', avatarSelect);
bigG.addEventListener('click', avatarSelect1);
greenG.addEventListener('click', avatarSelect2);
kidG.addEventListener('click', avatarSelect3);
surpG.addEventListener('click', avatarSelect4);

function avatarSelect (){
  console.log(avatar[0])
}
function avatarSelect1 (){
  console.log(avatar[1])
}
function avatarSelect2 (){
  console.log(avatar[2])
}
function avatarSelect3 (){
  console.log(avatar[3])
}
function avatarSelect4 (){
  console.log(avatar[4])
}

CodePudding user response：

Rather than attaching an event to each image object, it would be better to attach an event to the container surrounding it.

You can avoid overlapping codes and respond flexibly even if image objects increase.

for example

const imageContainer = document.getElementById("image-container");
imageContainer.onclick = function(e) {
    console.log(e.target.id); // you can get img tag's id
}

CodePudding user response：

Have a look at how Event Bubbling and delegation work in javascript to get a better understanding but you want to add the event to the parent container not to each element. So by adding new elements to your array they will be clickable.

const avatars = [
  'brownGorillaAvatar',
  'mainGorillaAvatar',
  'greenGorillaAvatar',
  'kidGorillaAvatar',
  'surpriseGorillaAvatar' 
]

const avatarContainer = document.querySelector('#avatarContainer');

avatars.forEach((avatar) => {
  const span = document.createElement('span');
  span.innerHTML = avatar;
  avatarContainer.appendChild(span);
})

avatarContainer.addEventListener('click', (evt) => {
  console.log(evt.target);
})

<html>
  <head></head>
  <body>
    <section id="avatarContainer">
    </section>
  </body>
</html>