Discussion :

[hihihi62]

Bonjour à tous,

Je me lance peu à peu avec JavaScript pour mon site, je pensais avoir tout gagné tout compris.
Mes pages (html), js et css fonctionnent très bien lorsque mon html ne contient que très peu de choses. Une fois que je commence à remplir ma page badabim badaboum, plus rien ne va. Je sais que ça doit être une faute bête, de novices...

Ceux qui souhaitent m'aider sont les bienvenus parce que là je sèche (même si je continue d'essayer de trouver où est la bêtise que j'ai faite).

Le but de mon JS & HTML est de faire une petite galerie photo qui bouge grâce à des sélecteurs (suivant et précédent). Voici mon code js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var next = function (element, nodeName) {
    if(element.nextSibling){
        if(element.nextSibling.nodeName === nodeName) { 
            return element.nextSibling;
        } else {
            return next(element.nextSibling, nodeName);
        }
    }
    };
 
    var previous = function (element, nodeName) {
if(element.previousSibling){
        if(element.previousSibling.nodeName === nodeName) { 
            return element.previousSibling;
        } else {
            return previous(element.previousSibling, nodeName);
        }
    }
    };
 
    window.addEventListener("load", function () {
        var photo = document.querySelector('#photo'),
            prec = document.querySelector("#precedent"),
            suiv = document.querySelector("#suivant"),
            li = document.querySelector('li');
 
 
        li.querySelector('img').style.height = '130px';
 
 
        suiv.addEventListener("click", function () {
            li.querySelector('img').style.height = '';
 
            li = next(li, 'LI') || li;
            li.querySelector('img').style.height = '130px';
            // récupére l'url du href de l'ancre de l'image
            photo.src = li.querySelector("a").getAttribute("href");
        }, false);
 
        prec.addEventListener("click", function () {
            li.querySelector('img').style.height = '';
 
            li = previous(li, 'LI') || li;
            li.querySelector('img').style.height = '130px';
            // récupére l'url du href de l'ancre de l'image
            photo.src = li.querySelector("a").getAttribute("href");
        }, false);
    }, false);

Ce code fonctionne si ma page html ne contient rien d'autre que mon diapo de photo :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id='diapo'>
 
            <div ><img id="photo" src="images/grande/salon.jpg" alt="image" /></div>
            <div>
                <div id="precedent"><img src="images/prec.gif" alt="precedent" /></div>
                <ul>
 
                    <li><a href="images/grande/salon.jpg"><img src="images/petite/salon.jpg" alt="Title #0" /></a></li>
                    <li><a href="images/grande/chambre1.jpg"><img src="images/petite/chambre1.jpg" alt="Title #0" /></a></li>
                    <li><a href="images/grande/chambre2.jpg"><img src="images/petite/chambre2.jpg" alt="Title #0" /></a></li>
                    <li><a href="images/grande/chambre3.jpg"><img src="images/petite/chambre3.jpg" alt="Title #0" /></a></li>
                    <li><a href="images/grande/cuisine.jpg"><img src="images/petite/cuisine.jpg" alt="Title #0" /></a></li>
                </ul>
                <div id="suivant"><img src="images/suiv.gif" alt="suivant" /></div>
            </div>
        </div>

Si je rajoute des listes li, par exemple dans mon menu, ça ne fonctionne plus et la console JS m'indique :

Uncaught TypeError: Cannot read property 'style' of null

(qui renvoie à = li.querySelector('img').style.height = '130px'; ).

Si une bonne âme charitable pourrait m'élever au rang de maître de la galerie en m'aidant, je serai extrêmement reconnaissante ! Si par moi même je trouve ma bourde, je me flagelle pendant tout le mois.

Merci, et désolée si mon code vous semble dégueulasse.
Bonne journée à tous.

[SylvainPV]

querySelector sélectionne un élément et un seul. Là tu sélectionnes la première balise <li> et la première balise <img> dans cette balise <li>. S'il n'y a pas d'image dans ta première balise, img vaudra null d'où l'erreur quand tu essaies de modifier le style. Utilise un sélecteur plus précis qu'un simple nom de balise, par exemple

Code :

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

var lis = document.querySelectorAll('#diapo ul li');

[hihihi62]

Merci ! J'avais essayé avec "#diapo li" mais ça ne fonctionnait pas Milles merci Bonne journée !

[SylvainPV]

Si tu as mis ton autre <li> à l'intérieur du div#diapo, ça ne résout pas le problème en effet. Mais tous les <li> sont censés être à l'intérieur d'un <ul>, donc ça reste louche.