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

  1. #1
    Nouveau membre du Club
    Déclarer la même fonction dans ou en dehors de window.onload ?
    Bonjour,

    Je suis confronté à un problème étrange: afin que mon script.js soit fonctionnel dans ma page HTML, je dois commencer le script par:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    window.onload = function () {
     //lignes de code}


    Pour le moment rien d'anormal. Parcontre, si je veux utiliser une fonction du type onclick directement dans une balise comme ceci:
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <span onclick="deleteTask(this)" >x</span>


    La fonction deleteTask() n'est pas reconnu, pour qu'elle le soit, je dois la déclarer avant le window.onload, comme ceci:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     function deleteTask(element)
    {
    //lignes de code
    }
    /***********************Start of window.onload****************/
    window.onload = function () {
    //lignes de code
    }


    Il n'y pas une solution pour déclarer à un seul endroit toutes les fonctions et variables afin qu'elles soient reconnues n'importe où?

    Cdt.

  2. #2
    Expert confirmé
    Bonsoir,

    Citation Envoyé par nadfri2019 Voir le message
    La fonction deleteTask() n'est pas reconnu, pour qu'elle le soit, je dois la déclarer avant le window.onload
    Non, il faut l'intégrer aux instructions lancées sur window.onload;

    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    window.addEventListener("load",function(){
    // toutes les définitions que tu veux
    }
    )

  3. #3
    Nouveau membre du Club
    Justement en l'integrant dans window.onload, j'ai cette erreur:

    "ReferenceError: deleteTask is not defined
    at HTMLParagraphElement.onclick
    Voici le cas concret sur JSBIN à ce lien :
    https://jsbin.com/xidojifeza/edit?html,js,console,output

    Si la fonction deleteTask() est en dehors du onload, ca marche parfaitement.

  4. #4
    Expert confirmé
    Non mais dans le principe, tu peux déclarer tous les gestionnaires d'événements dans le onload; c'est une garantie zéro bug;
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    // au chargement du document
    window.addEventListener("load",function(){
       // ton bouton provoque je ne sais quoi quand tu cliques dessus
       document.getElementById("boutonA").addEventListener("click",function(){
          // action voulue
       }
    ,false)
    })

  5. #5
    Nouveau membre du Club
    Le boutonA.onclick est bien reconnu en effet, ce qui n'est pas reconnu c'est la function deleteTask(), car celle ci est appelé dans une balise HTML.
    Soit je met le code de la fonction dans un <script></script> dans le <body> , soit je dois la sortir du window.onload.

    Vu que j'aimerai bien l'utiliser ailleurs que dans la balise, je suis obligé pour le moment de la déclarer 2 fois, une fois dans le window et une autre fois en dehors, c'est plutôt problématique pour la propreté du code.


    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    window.onload = function()
    {
      boutonA.onclick = () => {
      fieldsetA.innerHTML+= `<p onclick="deleteTask(this)">${inputA.value}</p>`;};
     //ajoutd'un element "p" avec un onclick dans la balise
    } //fin de du onload de window
     
    //*********En dehors de window.onload, deleteTask est reconnue
     
    function deleteTask(element)
    {element.innerHTML = ""; //efface l'element au clic}


    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <body>
      <input id="inputA" type="text" value="Tache1"/>
      <button id="boutonA">Ajouter Tache</button>
      <fieldset id=fieldsetA><legend>Liste:</legend></fieldset>
    </body>

  6. #6
    Expert confirmé
    petit conseil: renseigne-toi sur les gestionnaires d'événement et surtout, arrête d'en insérer dans des éléments html.

    pour reprendre ce que tu veux faire, sans fioriture, ça donne ça:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    window.addEventListener("load",function(){
    	document.getElementById("boutonA").addEventListener("click",function(){
    		const p=document.createElement("p");
    		document.getElementById("fieldsetA").appendChild(p);
    		p.textContent=document.getElementById("inputA").value;
    		p.addEventListener("click",function(e){
    			e.target.parentNode.removeChild(e.target)
    		},false)
    	},false)
    },false)

  7. #7
    Nouveau membre du Club
    Oui je suis tout à fait d'accord, mais comme je n'arriverai pas à cibler le "p" nouvellement créé pour pouvoir l'effacer, je suis passer par ce bricolage.

    Merci pour ton code ça ressemble à ce que j'avais commencé à faire avant de buter sur le removeChild

    Je vais m'en inspirer.

    Juste une dernière question, à quoi sert le "false" en second argument du addeventListerner.

  8. #8
    Expert confirmé
    Citation Envoyé par nadfri2019 Voir le message
    je n'arriverai pas à cibler le "p" nouvellement créé pour pouvoir l'effacer
    Le code que je t'ai donné efface l'élément cliqué, quel que soit son rang;

    L'argument false correspond au paramètre "usecapture"; par défaut, le click sur un élément ne pourra pas être confondu avec un click d'un élément plus bas dans la hiérarchie;

  9. #9
    Nouveau membre du Club
    Merci pour ta précieuse aide