body onload() non pris en compte

**nouby** · 11/05/2023, 10h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload=init()>

mon code js se résume à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload=alert('tv')>

mon code js se résume à ça :

[CODE]

**SpaceFrog** · 11/05/2023, 10h35

Souci de syntaxte ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="init()">

**CosmoKnacki** · 11/05/2023, 11h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**nouby** · 11/05/2023, 13h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**CosmoKnacki** · 11/05/2023, 14h53

Tu peux tout à fait placer le code dans un fichier js que tu charges dans ta page html.

**nouby** · 11/05/2023, 22h40

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 !

body onload() non pris en compte

JavaScript

Discussions similaires

Partager

Partager