Comment appeler la fonction JavaScript dans HTML en utilisant la méthode onClick?

Comment appeler la fonction JavaScript dans HTML en utilisant la méthode onClick?
La programmation est une question d'efficacité. La répétition dans un code a toujours été désapprouvée par les développeurs du monde entier. Pour atteindre cet objectif, quelque chose appelé des fonctions existe dans la programmation. Alors qu'est-ce qu'une fonction exactement? Les fonctions peuvent être considérées comme un morceau de code que le développeur crée dans leur programme. Cette fonction qui a été créée une fois peut être utilisée plusieurs fois en utilisant simplement le nom de cette fonction. Dans le développement Web, les fonctions sont créées dans JavaScript mais peuvent être utilisées dans le code HTML.

Dans cet article, une lumière sera lancée sur la façon dont une fonction qui existe en JavaScript est accessible par la section HTML.

Appeler n'importe quelle fonction JS dans le code HTML

Lors de la lutte contre les fonctions en JavaScript, deux scénarios distincts se démarqueront. Cette section vous montrera comment vous pouvez appeler n'importe quelle fonction JavaScript dans l'un ou l'autre de ces deux cas.

Javascript à l'intérieur du fichier html

Lorsque la fonction JavaScript existe dans le même fichier que le code HTML, il est assez simple d'y accéder et de l'appeler dans HTML. Voyons l'exemple de code ci-dessous:






Cliquez sur ce bouton pour appeler la fonction JavaScript à l'intérieur de HTML




Dans la section JavaScript de ce code, une fonction est formée qui a le nom "échantillon". La fonction est censée exécuter une alerte lorsqu'elle est appelée. Dans le corps principal du code HTML, un bouton est créé. Les boutons ont un «sur clic»Fonctionnalité qui leur permet d'appeler des fonctions à partir du code JS. Nous utiliserons le nom "échantillon«Qui sera utilisé pour l'appeler dans le«sur clic" fonctionnalité. Consultez l'exemple ci-dessous:

La sortie est la suivante:

Javascript dans un fichier externe

Dans la plupart des cas, les fonctions JavaScript ne sont pas présentes dans le même fichier que le code HTML. Dans des cas comme celui-ci, les deux fichiers doivent être liés ensemble afin que le code HTML puisse appeler des fonctions de JavaScript. Ce code ci-dessous représente le fichier JavaScript:

fonction samplefunction ()
document.Écrire ("La fonction a été appelée!");

Dans le fichier javascript, la fonction a été créée. Cette fonction peut maintenant être appelée dans un fichier HTML autant de fois que le développeur le souhaite. Le code ci-dessous affiche le fichier HTML:






Cliquez sur ce bouton pour appeler la fonction JavaScript à l'intérieur de HTML




Ici, nous avons lié le fichier JavaScript qui est nommé «jsfile.js"Avec le fichier html en utilisant le"SRC»Mot-clé dans les balises de script. Cela permettra au «sur clic”Fonction ci-dessous pour accéder à la fonction à partir du fichier JS.

Conclusion

Il existe deux façons d'atteindre une fonction JavaScript dans HTML. La première consiste à utiliser le «sur clic”Fonctionnalité d'un bouton pour appeler la fonction qui est déjà présente à l'intérieur du fichier html. Le second consiste à relier le fichier JavaScript externe avec le fichier HTML à l'aide du mot-clé «SRC». Dans cet article, vous avez appris les deux scénarios différents dans lesquels vous devrez accéder à une fonction à partir de JavaScript à l'intérieur de HTML.