body onload() non pris en compte

Version imprimable

11/05/2023, 10h14
nouby

body onload() non pris en compte
Bonjour

J'ai un dossier de mon site d'entrainement qui est fait comme ça :

index.html
dossier "css"
dossier "js"
dossier "img"

mon fichier html commence comme ça :

Code:

<body onload=init()>

mon code js se résume à ça :
Code:

1 2 3 4 5 function init(){ alert('tv'); }
La fonction alert() ne s'affiche pas et j'ai le message d'erreur du navigateur qui est :

caught SyntaxError: Unexpected end of input (at index.js:295:1)
index.html:17 Uncaught ReferenceError: init is not defined
at onload (index.html:17:21)
onload @ index.html:17

Par contre si je met la fonction alert() à la place de init() dans le body alors elle s'affiche bien.

Code:

<body onload=alert('tv')>

mon code js se résume à ça :

[CODE]
11/05/2023, 10h35
SpaceFrog

Souci de syntaxte ...

Code:

<body onload="init()">
11/05/2023, 11h12
CosmoKnacki
Citation:

index.html:17 Uncaught ReferenceError: init is not defined

Les messages d'erreurs ne sont pas un langage magique et sont en général plutôt terre à terre. Ici on te dit que init n'est pas défini. C'est donc qu'au chargement de la page ta fonction init() n'est pas encore connue. je serais prêt à parier que celle ci se trouve dans des balises script situées aprés ta balise body.

Le probème, c'est que tu mélanges plusieurs manières de faire:
- une manière consiste à définir ses fonctions dans le head pour qu'elles soient disponibles dans le corp du html.
- une autre manière qui consiste à placer son code à la fin du html: l'intérêt est que le DOM est disponible.
Maintenant, déclencher du javascript au sein des balies html est un peu old school et mieux vaut utiliser les gestionnaires d'événements:
Pour que le DOM soit disponible:
Code:

1 2 3 4 5 6 7 document.addEventListener("DOMContentLoaded", function() { function init() { alert('truc'); } init(); });
ou si tu veux que les images soient chargées:
Code:

1 2 3 4 5 6 7 window.addEventListener('load', function() { function init() { alert('truc'); } init(); });
Ces codes peuvent être placés n'importe où dans la page, dans le head ou à la fin.
11/05/2023, 13h58
nouby
Merci spacefrog pour ta remarque de code, maintenant ça va marcher ;)

Merci Cosmo pour ton tuto, j'ai appris un truc super interessant et utile !

EDIT :
Mon init dans le body load ne fonctionne pas en l'écrivant comme spacefrog, et je voulais essayer la méthode de Cosmo mais n'y a t'il pas moyen d'avoir mon code dans le fichier js et de l'appeler dans le html ?
Car avec la méthode de cosmo ça m'oblige à écrire le code dans la page html.

En attendant pour tester j'ai mis ce code aprés la balise de fin du html et ça marche pas :/
Code:

1 2 3 4 5 6 7 8 <script> document.addEventListener("DomContentLoaded", function() { function init() { alert('coucou'); } init(); }) </script>
11/05/2023, 14h53
CosmoKnacki

Tu peux tout à fait placer le code dans un fichier js que tu charges dans ta page html.
11/05/2023, 22h40
nouby

Mais alors le code ne sera plus appelé par le chargement de la page html, c'est dommage.
J'ai besoin que ma page dés qu'elle est chargée appelle la fonction init() qui contiendra beaucoup de code js bientôt.

Tu as une idée de pourquoi ça ne marche pas en faisant comme toi par les evennements ?

Je comprend pas pourquoi le pc me dit que init() n'est pas définie alors que la fonction est bien dans le fichier js...

Résolu !

J'avais oublié une accolade de fermeture :/
Merci pour votre aide, c'est génial ce forum !