[RUBY] À propos de getElementsByClassName et addEventListener

Je peux refaire la même erreur parce que je ne comprends pas grand-chose maintenant. Gardez un dossier pour pouvoir regarder en arrière et le vérifier à ce moment-là.

Contexte

Lors de l'implémentation de la fonction de suppression avec des rails, je souhaite afficher une boîte de dialogue de confirmation avant de supprimer, donc je l'écris dans le fichier Javascript.

html.erb


 <%= link_to 'Effacer', hoge_path(hoge.id), class: 'delete-btn', method: :delete %>

javascript



function check() {
  const btn = document.getElementsByClassName('delete-btn');
    btn.addEventListener('click', () => {
    window.confirm('Effectuer une suppression')
  })
 };

J'essaye de cliquer sur le bouton de suppression, mais la boîte de dialogue n'apparaît pas et la suppression est exécutée. Il se recharge et essaie à nouveau, mais il est supprimé sans rien.

Conclusion

Modification de la description du fichier html comme suit

html.erb


 <%= link_to 'Effacer', hoge_path(hoge.id), class: 'delete-btn', method: :delete, data: { confirm: 'Effacerを実行します。よろしければOKをクリックしてください。' } %>

Après vérification, on dit qu'une boîte de dialogue s'affichera si vous écrivez `data: {confirm:" words to be displayed "}` dans link_to. Résolu pour afficher la boîte de dialogue.

Sujet principal

Alors que faire si vous voulez utiliser addEventListener dans un fichier JavaScript?

  1. S'il n'y a qu'un seul élément à obtenir, donnez un identifiant et récupérez-le avec `` `getElementById```.
  2. Récupérez l'élément avec querySelectorAll``` → Utilisez la fonction forEach`` pour l'élément acquis

La fonction foreach '' est une méthode de l'objet NodeList et NodeList est la valeur de retour de querySelectorAll ''. Par conséquent, utilisez querySelectorAll '' au lieu de getElementsByClassName '' pour obtenir les éléments.
À propos, la valeur de retour de getElementsByClassName est` `` HTMLCollection.

Impressions

Je ne suis toujours pas très familier avec cela, et comme j'écris en reliant ce que j'ai recherché pour le moment, il y a beaucoup de parties que je ne comprends pas. J'ai senti que je devais étudier pour approfondir ma compréhension.

Article de référence

Recommended Posts

À propos de getElementsByClassName et addEventListener
À propos de Serializable et serialVersionUID
À propos du package Java et de l'importation
À propos de Ruby, modèle objet
À propos des classes et des instances Ruby
À propos des variables d'instance et attr_ *
À propos =
À propos de l'héritage orienté objet et du rendement Ruby
A propos des types primitifs et des types de référence Java
Ceci et cela à propos de Base64 (Java)
À propos de Docker, faux serveur et conteneur
À propos de la différence entre irb et pry