1
votes

Comment afficher le nom de fichier d'une image en cliquant dessus avec addEventListener?

J'ai une grille d'images sur une page HTML, et j'essaye de créer une alerte avec le nom du fichier image en cliquant dessus. Je tire des images d'un script python dans un tableau urls

Voici mon code HTML, y compris la section JS correspondante. J'ai essayé sans passer de variables à la fonction (en utilisant alert (document.src) ) mais en cliquant sur l'image donne «Undefined» dans une alerte. J'ai également essayé de passer une variable dans la fonction et de l'appeler dans mon alerte, mais cela affiche «[objet MouseEvent]».

Que dois-je changer dans ma fonction pour afficher le nom du fichier image d'origine, et y a-t-il un moyen d'ajouter de la flexibilité à la fonction afin que la même fonction soit exécutée quelle que soit l'image sur laquelle vous avez cliqué, plutôt que de répéter la même fonction pour les quatre images?

<tr>
  <div class="row">
    <td> <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12231413/Labrador-Retriever-MP.jpg" id="img0"></td>
    <td> <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2020/04/shelter-dog-cropped-1-632x329.jpg" id="img1"></td>
  </div>
  <div class="row">
    <td> <img src="https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg" id="img2"></td>
    <td> <img src="https://dogtime.com/assets/uploads/2011/03/puppy-development-1280x720.jpg" id="img3"></td>
  </div>
</tr>

<script>
  // document.getElementById("img0").addEventListener("click", myFunction, false);
  document.querySelectorAll(".row > td > img").forEach(img => img.addEventListener("click", myFunction, false));


  function myFunction() {
    alert(this.src);
  }
</script>

EDIT: Exemple reproductible par demande de @ hev1

Modifications - J'ai échangé des urls [k] avec des liens directs vers des images pour supprimer l'étape consistant à extraire des images de mon script main.py. La partie commentée du JS fonctionne très bien (le fait de cliquer sur la première image alerte l'URL de cette image), mais querySelectorAll ne provoque aucune réponse (y compris dans le journal de la console) lorsque vous cliquez sur l'une des images.

<tr>
  <div class="row">
    <td> <img src="{{ urls[0] }}" id="img0"></td>
    <td> <img src="{{ urls[1] }}" id="img1"></td>
    <td> <img src="{{ urls[2] }}" id="img2"></td>
    <td> <img src="{{ urls[3] }}" id="img3"></td>
  </div>
</tr>

<script>
      document.getElementById("img0").addEventListener("click", myFunction, false);

      function myFunction(image) {
        alert(image);
        // alert(document.src);
      }
    </script>

javascript html addeventlistener

2 commentaires

console.log (image) lorsque cliquez s'il vous plaît

Dans le gestionnaire d'événements, utilisez alert (this.src) .

3 Réponses :

2
votes

Vous pouvez utiliser this.src.

document.querySelectorAll("img").forEach(img => img.addEventListener("click", myFunction, false));

Pour attacher le gestionnaire d'événements à toutes les images, vous pouvez utiliser document.querySelectorAll code >.

function myFunction() {
    alert(this.src);
}

4 commentaires

La première partie a parfaitement fonctionné! Mais quand j'ai remplacé document.getElementById ("img0"). AddEventListener ("click", myFunction, false); par document.querySelectorAll (". Row> td> img"). ForEach (img => img.addEventListener ("click", myFunction, false)); Je n'obtiens plus de réponse en cliquant sur les images, et rien ne se passe non plus dans le journal de la console

@Henrik Pourriez-vous s'il vous plaît fournir un exemple reproductible?

@Henrik Le problème était que vous aviez une structure de table non valide. L'utilisation de document.querySelectorAll ("img") le corrige.

@Henrik Pas de problème.

1
votes

Vous pouvez utiliser event.target qui renvoie l'élément d'où provient l'événement.

Démo:

<p>Click an image, to see its source in the console<p>
<img src="http://via.placeholder.com/100">
<img src="http://via.placeholder.com/300">
<img src="http://via.placeholder.com/200">
<img src="http://via.placeholder.com/500">

img {
  height: 10em;
}

const images = document.querySelectorAll("img")

images.forEach(function(img){
  img.addEventListener("click", function(event){
  console.log(event.target.src);
  })
})

0 commentaires

1
votes

vous pouvez jouer.

<div id="app"></div>

const data = [
  {
    id: 'img_1',
    src: 'https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12231413/Labrador-Retriever-MP.jpg',
    alt: 'This is image!'
  },
  {
    id: 'img_2',
    src: 'https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg',
    alt: 'This is image!'
  }
];

const ul = document.createElement('ul');
const appDiv = document.getElementById('app');
ul.style.listStyle = 'none';

const drowList = () => {
  data.map(img => {
    const li = document.createElement('li');
    const liImg = document.createElement('img'); 
    liImg.src =  img.src; 
    liImg.alt = img.alt;
    liImg.title = img.alt;
    liImg.id = img.id;

    liImg.style.width = '200px';
    liImg.style.height = '150px';
    liImg.addEventListener('click', () => alertImage(img.alt))

    li.appendChild(liImg);
    ul.appendChild(li);
  })
}

const alertImage = (img) => {
  alert(img)
}

drowList()
appDiv.appendChild(ul);

1 commentaires

Merci! Cela semble être une autre excellente option avec laquelle travailler