Maison > interface Web > js tutoriel > Pourquoi `onclick='clear()'` ne fonctionne-t-il pas en JavaScript ?

Pourquoi `onclick='clear()'` ne fonctionne-t-il pas en JavaScript ?

Linda Hamilton
Libérer: 2024-12-24 21:12:12
original
1008 Les gens l'ont consulté

Why Doesn't `onclick=

onclick="clear()" Ne fonctionne pas : Comprendre l'obstacle JavaScript

En tentant de créer une calculatrice de base, on rencontre un problème déroutant : le "clear ", attribué avec l'attribut onclick="clear()", ne parvient pas à exécuter sa fonction prévue d'effacement du champ de texte.

L'énigme réside dans le attributs d'événement intrinsèques, tels que onclick. Ces attributs utilisent l'instruction with, une pratique déconseillée en raison de son potentiel de confusion et de problèmes de compatibilité. Par conséquent, l'attribut onclick="clear()" appelle par inadvertance document.clear() plutôt que la fonction globale clear() prévue.

Pour résoudre ce problème, on peut renommer la fonction clear ou appeler explicitement window. clair(). Cependant, une solution supérieure consiste à utiliser addEventListener pour la liaison d'événement, ce qui évite l'utilisation d'attributs d'événement intrinsèques.

L'exemple de code suivant démontre la bonne implémentation à l'aide de addEventListener :

<script>
  const clearButton = document.querySelector('input[value="C"]');
  clearButton.addEventListener('click', clear);

  function clear() {
    document.getElementById("field").value = "";
  }
</script>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal