IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Exécution d'une fonction à chaque déclenchement d'un événement


Sujet :

JavaScript

  1. #1
    Invité
    Invité(e)
    Par défaut Exécution d'une fonction à chaque déclenchement d'un événement
    Bonjour.

    Avec le code ci-dessous, lorsqu'on clique sur la div #div1, une boîte alert apparaît et 5 div sont générées sur la page.

    La génération des div se fait par l'intermédiaire de la function funcTest().

    Au premier clic sur #div1, tout fonctionne. Mais aux suivants, plus rien ne fonctionne pour moi. Testé sur 4 navigateurs (or IE).

    Est-ce que ce code génère le même comportement chez vous ?
    Comment faire en sorte de pouvoir exécuter funcTest() autant de fois que l'on clique sur #div1 ?

    Merci.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
     
    <!doctype html> 
    <html lang="fr"> 
     
    <head> 
    	<meta charset="utf-8" /> 
    	<title>sans titre</title>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<style>
    		html, body, div {
    			margin: 0;
    			padding: 0;
    		}
    		#div1 {
    			width: 100px;
    			height: 100px;
    			background: blue;
    		}
    	</style>
    </head> 
     
    <body>
     
    	<div id="div1">Click</div>
     
    	<script type="text/javascript">
     
    		var div1 = document.getElementById('div1');
     
    		function funcTest() {
    			for(var i=0; i<5; i++) {
    				document.body.innerHTML += '<div>test</div>';
    			}
    		}
     
    		div1.addEventListener('click', function(e) {
    			alert('ok');
    			funcTest();
    		}, false);
     
    	</script>
    </body>

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    C'est effectivement un classique de innerHTML. Etant donné que tu remplace le contenu du body par une chaine, l'affichage se passe bien, mais tu perds les méthodes appliquées au DOM.
    La solution est de passer par une fonction manipulant uniquement le DOM :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!doctype html> 
    <html lang="fr"> 
     
    <head> 
    	<meta charset="utf-8" /> 
    	<title>sans titre</title>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<style>
    		html, body, div {
    			margin: 0;
    			padding: 0;
    		}
    		#div1 {
    			width: 100px;
    			height: 100px;
    			background: blue;
    		}
    	</style>
    </head> 
     
    <body>
     
    	<div id="div1">Click</div>
     
    	<script type="text/javascript">
     
    		var div1 = document.getElementById('div1');
     
    		function funcTest() {
    			var newDiv;
    			for(var i=0; i<5; i++) {
    				newDiv = document.createElement('div');
    				newDiv.appendChild(document.createTextNode('test'));
    				document.body.appendChild(newDiv);
    			}
    		}
     
    		div1.addEventListener('click', function(e) {
    			alert('ok');
    			funcTest();
    		}, false);
     
    	</script>
    </body>
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Invité
    Invité(e)
    Par défaut
    Ah ok... Merci.

    Et cette perte des méthodes avec body.innerHTML, elle se retrouve de la même manière quel que soit l'élément HTML dont on remplace le contenu, ou c'est spécifique à certains éléments ?

    --

    Et une question subsidiaire me taraude: en observant ton code, je remarque l'absence du mot-clé var lors de la définition des variables. Son utilisation n'est donc pas nécessaire ? N'est-elle que souhaitable ? Et pourquoi ?

    ---

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    A priori, c'est le cas pour tous les éléments, mais en sachant que cela n'affecte que ceux qui sont modifiés et uniquement sur certaines propriétés et / ou méthodes.
    Par exemple, si tu modifies une div avec innerHTML, cela ne devrait pas avoir d'impact sur les éléments en dehors de cette div.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Exécuter une fonction chaque seconde
    Par zemzoum89 dans le forum Débuter avec Java
    Réponses: 11
    Dernier message: 04/11/2010, 17h32
  2. Exécuter une fonction chaque Seconde
    Par killer69 dans le forum C#
    Réponses: 18
    Dernier message: 30/01/2008, 09h37
  3. Réponses: 3
    Dernier message: 11/03/2006, 15h35
  4. Pause dans l'exécution d'une fonction
    Par FrankOVD dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 29/06/2005, 07h48
  5. Exécution d'une fonction...
    Par mickeliette dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 25/11/2004, 16h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo