Déclarer la même fonction dans ou en dehors de window.onload ?

Version imprimable

17/02/2020, 21h41
nadfri2019

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:

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:

<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:

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.
17/02/2020, 22h19
javatwister
Bonsoir,

Citation:

Envoyé par nadfri2019

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:

1 2 3 4 window.addEventListener("load",function(){ // toutes les définitions que tu veux } )
18/02/2020, 13h49
nadfri2019

Justement en l'integrant dans window.onload, j'ai cette erreur:

Citation:

"ReferenceError: deleteTask is not defined
at HTMLParagraphElement.onclick

Voici le cas concret sur JSBIN à ce lien :
https://jsbin.com/xidojifeza/edit?ht...console,output

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

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:

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) })

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:

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:

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>

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:

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)

18/02/2020, 16h22
nadfri2019

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.
18/02/2020, 16h42
javatwister

Citation:

Envoyé par nadfri2019

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;
18/02/2020, 16h46
nadfri2019

Merci pour ta précieuse aide :)