imbrication d'évènements

exercices les desserts

7 décembre 2019 à 11:28:46

Bonjour,

Je suis sur le cours apprendre à dynamiser une page web avec le javascript.

Dans ce cours il y à un exercices sur des desserts.

L'objectif est de rajouter des li dans une liste ul modifiable par un click sur le text.

J'ai vues la solution ou l'on crée un évènement sur un bouton ajouter un li et dans cette évènement on crée un nouvelle évènement pour avoir la possiblitée de modifier le texte du li.

J'en arrive à ma question.

Je souhaite savoir pourquoi les deux évènements sont imbriqués et pas indépendants l'un de l'autre.

est-il possible d'avoir un accès a un li ajouter dans la liste avec un évènement in dépendant de celui qui permet de l'ajouter.

En espérant être clair dans ma question et mes explications.

-
Edité par LaurentCervantes1 7 décembre 2019 à 15:15:58

AbcAbc6

7 décembre 2019 à 11:36:38

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : besoin d'une petite réponse)

Liens conseillés

Règles générales du forum

Arthur222

7 décembre 2019 à 16:28:18

Salut,

tu devrais mettre un exemple de code (en cliquant sur </> dans le message) pour que ce soit plus clair.

Pour ta question, quand tu crées un event, tu peux retrouver les informations de l'élément qui est connecté à l'event avec la fonction de "callback" qui suit, par exemple element.addEventListener("click", function(){ ... } ) , la "function" ici c'est le callback, qui sera lancé quand le click aura lieu. Tu peux alors utiliser "this", ou "event.target" pour retrouver l'élément. ("event" doit alors être mis dans le paramètre de function)

Si tu veux attendre qu'il y a eu un click avant d'attendre un autre événement, tu dois lier les 2, soit en les imbriquant, soit en mettant par exemple une variable boolean à false, puis dans la fonction click, tu la mets à true, et dans ta function de callback de l'autre event, tu mets en première ligne une vérification, if (!leBoolean) return; par exemple : si le boolean est false, il n'a pas été mis à true, donc on return/on sort de la fonction sans rien faire.

Si tu veux retrouver un élément que tu as ajouté dynamiquement, c'est-à-dire qui n'était pas écrit dans le html à la base, mais que tu as créé depuis le code js, alors il faut que tu rajoutes l'élément dans le document avant de pouvoir l'utiliser, comme ça :

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="button" value="test" name="nom" id="tt"/>
<script>
var taDivMachin = document.getElementById("tt");
taDivMachin.addEventListener("click", function(event){
  document.innerHTML += "<div id='aa'></div>";


  var myDiv = document.createElement('div');
  myDiv.id = 'bb';
  myDiv.innerHTML = "le test marche bien";
  document.body.appendChild(myDiv);//<-- ici, tu l'ajoutes. Ensuite tu pourras le retrouver

  var test = document.getElementById("bb").innerHTML;//...ici tu le retrouves
  console.log("le test est : "+test);
})
</script>
</body>
</html>

-
Edité par Arthur222 7 décembre 2019 à 19:25:52