document.querySelector('button').addEventListener('click', () => {
  let next = this.parent.nextElementSibling.innerText
  console.log(next)
})
  <div>
    <div>
      <button>1</button>
    </div>
    <div>
      test
    </div>
  </div>

Je veux obtenir le texte "test" de ce qui précède. Donc, fondamentalement, lorsque le bouton est enfoncé, il passe au parent, puis sélectionne le div suivant à partir de ce qui a été cliqué.

Je ne suis pas tout à fait sûr de ce que je fais de mal.

0
ditto 4 juin 2020 à 00:10

3 réponses

Meilleure réponse

Deux problèmes:

  1. Dans une fonction de flèche, this est hérité du contexte appelant, il ne peut pas être défini par l'appelant. Ce ne sera donc pas la cible de l'événement. Utilisez un paramètre d'événement e, puis utilisez e.currentTarget pour obtenir l'élément sur lequel vous avez cliqué.
  2. La propriété correcte pour obtenir le parent est parentElement.
document.querySelector('button').addEventListener('click', (e) => {
  let next = e.currentTarget.parentElement.nextElementSibling.innerText
  console.log(next)
})
  <div>
    <div>
      <button>1</button>
    </div>
    <div>
      test
    </div>
  </div>
1
Barmar 3 juin 2020 à 21:17

Tout d'abord, j'ai remarqué que vous utilisez this pour obtenir l'élément button. L'utilisation de this n'est pas possible dans les fonctions fléchées, car this deviendrait la fenêtre / portée globale. Donc, je pense personnellement que ce serait de le convertir en une fonction régulière.

Ensuite, pour obtenir l'élément parent d'un élément, utilisez la propriété .parentElement, pas la propriété .parent.

Avec tous ces changements, voici un code final qui semble fonctionner.

document.querySelector('button').addEventListener('click', function() {
  let next = this.parentElement.nextElementSibling.innerText;
  console.log(next);
})
  <div>
    <div>
      <button>1</button>
    </div>
    <div>
      test
    </div>
  </div>

J'espère que ça aide.

1
Fred Adams 3 juin 2020 à 21:16

Êtes-vous sûr de ne pas utiliser event.target

document.querySelector('button').addEventListener('click', (evt) => {
  let next = evt.target.parent.nextElementSibling.innerText
  console.log(next)
})
1
px1mp 3 juin 2020 à 21:14