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

**nadfri2019** · 17/02/2020, 21h41

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.

**javatwister** · 17/02/2020, 22h19

Bonsoir,

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

**nadfri2019** · 18/02/2020, 13h49

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?ht...console,output

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

**javatwister** · 18/02/2020, 14h56

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

**nadfri2019** · 18/02/2020, 15h48

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>

**javatwister** · 18/02/2020, 16h13

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)

**nadfri2019** · 18/02/2020, 16h22

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.

**javatwister** · 18/02/2020, 16h42

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;

**nadfri2019** · 18/02/2020, 16h46

Merci pour ta précieuse aide

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

JavaScript

Discussions similaires

Partager

Partager