Javascript non-intrusif avec un évènement

Résolu/Fermé
sebilo Messages postés 29 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 28 novembre 2010 - Modifié par sebilo le 20/09/2010 à 17:55
sebilo Messages postés 29 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 28 novembre 2010 - 20 sept. 2010 à 21:29
Bonjour,

Pour présenter un problème suivant :
Je cherche à tester un code javascript non intrusif sur une page html.

Sous le code ci-dessous, j'ai mis sur une page html, un script javascript me permettant de créer un objet qui recceuille une fonction littérale nommée appel, celle-ci déclenche une alerte si elle est appelée.

Au dehors du script un élément button prends un comportement javascript, certes, mais intrusif.

Je voudrais qu'à la place de ce comportement au bouton, on puisse ajouter à ce dernier dynamiqement un évènement addEventListener('click' il me semble , (Deuxième argument) Eh là je ne sait pas comment faire appel àl ma fonction , Le troisième argument que je ne connais pas vraiment l'utilisation, il est booléen avec soit true soit false ); Mais là encore je ne sais pas si il faut que je l'ajoute à un élément récupèré qui porte l'id "Al".(Donc je pense qu'il va falloir utiliser une requête avec document.getElementById...

Voilà, donc il s'agit bien de trouver le moyen de faire appel à cette fonction littéral ("appel")
pour afficher le message d'alerte, et donc si on clique sur l'élément button.

Je pense qu'il existe plusieurs solutions.

Je vous laisse chercher. ^^. Merci d'avance. Le code est au dessous.


<html>
<body>
<script type="text/javascript">
affiche = {
appel : function(){
alert("Oh yeah!");
}
};
</script>
<button id="Al" onclick="affiche.appel();" value="Affiche alerte" size="20">Affiche alerte !</button>
</body>
</html>


2 réponses

canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
20 sept. 2010 à 19:36
je ne comprend pas trop ...

<script type="text/javascript">
<!--
function alerter() {
alert('Vous avez appeler la fonction alerter qui contient une alerte !');
}
//-->
</script>
<form><input type="button" onclick="alerter()" value="Afficher l'alerte !">
</form>
0
sebilo Messages postés 29 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 28 novembre 2010 2
20 sept. 2010 à 21:29
C'est encore moi, j'ai trouvé la solution dans un fichier html :
. Il faut pour que la page lise dans l'ordre mettre les balises scripts javascripts à la suite des balises html en question, sinon par exemple dans le cas de getElementById, l'id n'est pas intervenu à temps pour le javascript.

Voici le code qui fonctionne :

<html>
<body>
<!-- Il faut pour que la page lise dans
l'ordre mettre les balises scripts javascripts
à la suite des balises html en question, sinon
par exemple dans le cas de getElementById,
l'id n'est pas intervenu à temps pour le javascript. -->
<div id="as" size="20">Affiche alerte !</div><!-- id = "as". -->
<script type="text/javascript">
//Je déclare l'objet "obj"
obj = {
a : function(){//"a" sera ma fonction littérale de l'objet "obj"
document.write("ok");//je fais écrire sur le document
}
}
document.getElementById('as').onclick = obj.a;//À la propriété onclick de l'élément
//du document ayant l'identifiant "as", j'affecte l'objet "obj" et sa propriété "a"
</script>
</body>
</html>
0