11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fonction anonyme ne fonctionne pas

Bonjour,
je fais actuellement une formation développeur web.
j'ai vu les fonctions anonymes. Mon code fonctionne très bien mais pour une raison que j'ignore, quand j'ajoute (function() {mon code}) () plus rien ne fonctionne. 
(function() {
    var exemple = {
        init: function() {
            window.addEventListener('load', function(event) {
                var element = document.getElementsByTagName('h1')[0]
                element.addEventListener('mousedown', function(event) {
                    this.style.color = 'blue'
                })
                element.addEventListener('mouseup', function(event) {
                    this.style.color = 'red'
                })
            })
        }
    }
    exemple.init()
})()
Modérateur
Bonjour,

je viens juste de tester ton script dans codepen et il fonctionne. Tu as probablement un soucis avec le moment ou le script est appliqué et le moment ou la page est complétement chargée.

Cdt
Modérateur
Bonjour,

Dans ta fonction auto invoqué, je dirais naïvement de remplacé la ligne 
exemple.init()

par
 window.onload = exemple.init()


Cependant : 
window.addEventListener('load', function(event)
s'en charge déjà, alors peut-être y'a t-il un soucis coté de la structure HTML, une typo, pas de balises h1 , le script n'est pas chargé ?

Que dis l'inspecteur de ton navigateur ?

Cdt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="app.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">item 1</a></li>
                <li><a href="#">item 2</a></li>
                <li><a href="#">item 3</a></li>
                <li><a href="#">item 4</a></li>
            </ul>
        </nav>
    </header>
    <main id="main">
        <section>
            <h1>titre 1</h1>
            <p>paragraphe 1</p>
            <p class="important">paragraphe important 1</p>
        </section>
        <section>
            <h1>titre 2</h1>
            <p>paragraphe 2</p>
            <p class="important">paragraphe important 2</p>
        </section>
        <section>
            <h1>titre 3</h1>
            <p>paragraphe 3</p>
            <p class="important">paragraphe important 3</p>
        </section>
    </main>
</body>
</html>

Voilà mon html
J'ignore pourquoi, mais là d'un coup ça fonctionne.
En tout cas merci
Sujet clos
Aller à