Erreur evenement

ThomasCanal -
ThomasCanal - 26 mars 2019 à 17:40

Bonjour,

Dans mon application je souhaite supprimer tout ce qui se trouve dans le body lorsque l'utilisateur appuie sur un certain élément. J'ai donc lié cet élément à un evenement contenant la fonction de suppression, sauf que la fonction s’exécute sans l'appuie sur l’élément, et donc le body est supprimé dès le début et rien ne s'affiche :

<code><code>
<html>
<head>

</head>
<body>
      <script>
      	      function Element(type, texte){
                this.type = type;
                this.texte = texte;
              }

              function Creation(elemtab)
              {
                var nvelem;
                var texte;
                var ul;
                for(i=0;i<elemtab.length;i++)
                {
                  if(elemtab[i].type=="ul")
                  {       		
                    ul = document.createElement(elemtab[i].type);
                    document.body.appendChild(ul); 

                  }
                  else if(elemtab[i].type=="li")
                  {
                    nvelem = document.createElement(elemtab[i].type);
                    texte = document.createTextNode(elemtab[i].texte);
                    nvelem.appendChild(texte);
                    ul.appendChild(nvelem);
                  }
                  else
                  {        		
                    nvelem = document.createElement(elemtab[i].type);
                    texte = document.createTextNode(elemtab[i].texte);
                    nvelem.appendChild(texte);
                    document.body.appendChild(nvelem);
                  }
                }
              }

function suppression(){
                  var body = document.body;
                  while(body.childNodes[0])
                  {
                    body.removeChild(body.childNodes[0]);
                  }    
              }

              var li = document.querySelector('ul');

              for(i=0;i<li.childNodes.length;i++)
              {
                  li.childNodes[i].addEventListener('click',suppression());
              }   

var elemtab = [new Element('h1', 'Menu Principal'),new Element('ul',''),new Element('li', 'Commencer l\'exercice'),new Element('li', 'Voir le tableau des résultats'),new Element('li', 'Quitter l\'application')];

              Creation(elemtab);

      </script>

</body>
</html>

</code></code>

Afficher la suite

3 réponses

Réponse 1 / 3
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
Bonjour,
```
li.childNodes[i].addEventListener('click',suppression());
```
Ne mets pas les parenthèses
```
li.childNodes[i].addEventListener('click',suppression);
```
1
1. ThomasCanal
  
  Merci, j'avais pas vu mais ce n'est pas l'erreur que je cherche
  
  0
2. cenape
  
  Bonjour, cela fait une erreur de moins.
  il est bien compliqué ce script, pas évident de voir l'erreur.
  Déjà
  var li = document.querySelector('ul'); //-- ça donnera pas grand chose car la fonction Creation est appelée plus tard! ... ... Creation(elemtab);
  
  Je fait quelque chose d'un peu plus fonctionnel et je le propose bientôt.
  
  0
3. ThomasCanal > cenape
  
  Bonjour, c'était là qu'était l'erreur et merci beaucoup pour le reste du code ça va bien m'aider!
  
  0
4. ThomasCanal > cenape
  
  J'aurais une dernière question :
  Suite à la suppression du body j'essaye de créer du code html avec un fichier avascript externe, j'integre donc une balise <script> et j'y ajoute la source de mon fichier. Mais quand je teste rien ne s'affiche, sauriez vous pourquoi ?
  
  0
5. cenape
  
  salut, si je me souviens bien quand on rajoute une balise script avec du code ça ne fonctionne pas. Je n'ai as encore trouvé la solution en tout cas. Pour le reste traquez vos erreurs avec la console, en testant vos valeurs avec console.log. element.setAttribute marche avec tout et il y en a des spécifiques comme .id
  Bien sûr si le script est dans body et que vous l'enlevez c'est sûr que ça marchera pas. D'où l'intérêt d'ailleurs de ne pas tout effacer mais de changer que ce qui doit changer en gardant le body sinon autant mettre un lien vers une nouvelle page ça sera mieux.
  Sans voir le code de toute façon impossible à dire mais la syntaxe est ceci:
  <script src="monfichieraveclebonchemin.js"><script>
  
  0

cenape

bon il y a plus simple et plus élégant mais ça devrais vous donner des idées:

<!doctype html>
<html>
<head>
<style type="text/css" rel="stylesheet">
span{background-color:#fac0c0;}
</style>
</head>
<body>
<script>
document.body.onload = function(){//-- pour être sûr
function videLaPage(){
 document.body.innerHTML='';//-- c'est plus joli avec remove mais plus long à écrire
}

function ajoutContenu( tag, contenu , cible ){
 var tmp = document.createElement(tag);
 if(tmp.constructor.name != 'HTMLUnknownElement'){//-- vérifie que tag est un élement valide
  cible.appendChild(tmp);
  if(typeof contenu === typeof ''){//-- le contenu est du texte
   tmp.appendChild( document.createTextNode(contenu) );
   
  }
  return tmp;
 }
 console.log('mauvais nom de balise: '+tag);
 return;
}


ajoutContenu('p', 'du texte', document.body);
ajoutContenu('c',' pas bon' , document.body);
ajoutContenu('span', ' *un sous-texte dans le premier \'p\'* CLIQUER POUR VIDER ', document.getElementsByTagName('p')[0]).addEventListener(
	'click',
	videLaPage
	);


}

</script>
<body>

Bien sûr on peut très bien ajouter une condition pour que le paramètre contenu puisse aussi ajouter un HTMLElement dans un autre(au lieu de seulement du texte), ce qui peut être pratique.

Réponse 3 / 3
cenape
j'oubliais pour obtenir le nom d'une balise il suffit d'utiliser HTMLElement.tagName comme ceci:
```
alert(document.body.tagName); //-- affiche 'BODY' en message d'alerte
```
0

Erreur evenement

3 réponses

Discussions similaires

Newsletters