0
votes

Comment pouvez-vous alerter le html interne d'un div cliqué sans identifiant?

Dans une instance où vous essayez d'obtenir plusieurs div avec un contenu différent pour alerter leur contenu au clic, il peut être courant pour eux d'avoir chacun la même classe et aucun identifiant unique. Comment puis-je alerter le code HTML interne d'un div lorsqu'on clique dessus s'il n'est identifié que par un nom de classe? : Par exemple :

html

document.querySelectorAll('.button').forEach(item => {
  item.addEventListener('click', event => {
    alert(this.innerHTML)
  })
})

<div class='button'> a </div>
<div class='button'> b </div>
<div class='button'> c </div> 
<div class='button'> d </div>

javascript html this

3 commentaires

Quelle est votre question?

les gestionnaires d'événements de fonction de flèche ne capturent pas this , remplacez cette ligne par item.addEventListener('click', function(event) {

Merci Kunal cela a résolu le problème.

3 Réponses :

1
votes

utilisez event.target pour accéder à l'élément même sur event.target vous venez de cliquer:

document.querySelectorAll('.button').forEach(item => {
item.addEventListener('click', event => {alert(event.target.innerHTML)
})
})

0 commentaires

1
votes

À partir de cette référence , la propriété target de l'interface Event référencera l'objet sur lequel l'événement a été distribué.

Ainsi, vous pouvez obtenir le texte à l'intérieur du div cliqué en utilisant event.target .

<div class='button'> a </div>
<div class='button'> b </div>
<div class='button'> c </div> 
<div class='button'> d </div>

document.querySelectorAll('.button').forEach(item => {
  item.addEventListener('click', (event) => {
    alert(event.target.innerHTML);
  });
});

0 commentaires

1
votes

Dans votre cas , simplement remplacer this avec l' item rendrait votre travail d'extrait:

<button> a </button>
<button> b </button>
<button> c </button> 
<button> d </button>

button { display: block; }

Un conseil: si vous ajoutez de l'interactivité, utilisez des éléments de button "réels" qui lui sont conçus: vous bénéficierez d'un support clavier et d'une meilleure accessibilité globale gratuitement.

En outre, vous pouvez utiliser un seul gestionnaire attaché à certains parents d'éléments cibles, ce qui est dit meilleur dans certains scénarios:

document.body.addEventListener('click',buttonClick);

function buttonClick(event){
  var tgt = event.target;
  if(tgt.tagName != 'BUTTON') return;
  alert( "Â»" + tgt.innerText + "Â«");
}

<div class='button'> a </div>
<div class='button'> b </div>
<div class='button'> c </div>
<div class='button'> d </div>

document.querySelectorAll('.button').forEach(item => {
  item.addEventListener('click', event => {
    alert(item.innerHTML)
  })
})

0 commentaires