Petit problème avec mon script

MonNomEstSam
Javascript

J'ai un petit soucis avec mon script : il marche seulement avec Internet Explorer (je sais que c'est rare d'entendre ça ^^).

Tout d'abord mon script :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="style.css" />
        <link rel="icon" type="image/png" href="images/favicon.png" />
        <!--[if lt IE 11]><link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico" /><![endif]-->
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="sweetalert-master/dist/sweetalert.min.js"></script>
        <link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">
        var elmt = document.getElementById("i1");
        elmt.style.opacity = "1";
        </script>
    </head>
    <body>
        <div id="mapfond">
            <img src="images/map/fond.png" />
        </div>
        <div id="i1">
            <img src="images/map/1.png" />
        </div>
    </body>
</html>

Pour faire simple dans mon css ma div i1 a une opacité de 0.

Je voudrais donc savoir pourquoi le script de la ligne 13 marche avec Internet Explorer et pas avec les autres navigateurs, et comment régler ce problème.

J'espère que vous pourrez m'aider :)

Edit : Quand je fais inspecter l'élément sous chrome ça me dit qu'il y a une erreur à la ligne 13 : Uncaught TypeError: Cannot read property 'style' of null

Edit2 : J'ai peut-être trouvé la solution à mon problème, j'ai déplacé mon script à la fin du body, avant de mettre mon sujet en résolu pouvez-vous me dire si c'était la bonne solution ?

2 réponses

Damarus
Réponse acceptée

Salut, tout simplement le navigateur lit ton fichier de haut en bas et execute les actions une à une. Donc quand il voit ton JavaScript il l'éxecute mais le DOM n'est pas fini de construire, ta div n'existe pas encore car elle est plus bas dans le fichier donc il ne la trouve pas.

Place ton JS juste avant de fermer le body et ça fonctionnera

Edit : Ah bin t'as trouvé ^^ et vu que tu charges jQuery tu peux aussi l'utiliser pour lancer l'exécution de ton script quand il le faut.

MonNomEstSam
Auteur

Merci de ta réponse :)