Discussion :

[Elztx]

Bonjour à tous et à toutes,

Je créé actuellement un diaporama en Javascript pur orienté objet en suivant les bases d'un tuto (je ne maîtrise pas encore JS).
J'ai un petit souci avec mon code (similaire à celui du tuto qui fonctionne), j'obtiens le message d'erreur suivant dans ma console :


Voici le code du slider :

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
function Diaporama( cible,tableau,repertoire,duree){
 
 this.cible=document.getElementById("diapo");
 this.Tableau=tb;
 this.temp=tps;
 this.repertoir_image="images/";
 this.tbmage=-1;
 
 this.diap();
 
 
 this.diap = function(){
 
   this.tbmage++;
   this.cible.src=this.repertoir_image+this.Tableau[this.tbmage];
   if(this.tbmage==this.Tableau.length-1){
    this.tbmage=-1
   }
   var that=this;
   setTimeout(that.diap, that.temp);
  }
}
 
 
function inimage(){
 
 var tbdiapo=new Array("velo1.png","velo2.png","velo3.png","velo4.jpg");
 
 new Diaporama('diapo',tbdiapo,'images/',900)
 
}
 
typeof window.addEventListener == 'undefined' ? window.attachEvent("onload",inimage) : window.addEventListener("load",inimage, false);

Pour tester le code, voici les balises simples et le css :

Code HTML :

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

1
2
3
4
5
6
7
8
  <div class="slider">
 
                    <figure slide="slide">
                        <img id="diapo">
                        <figcaption id="legende"></figcaption>
                    </figure>
 
                </div>

Code CSS :

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

1
2
3
4
5
6
body{
background: black
}
img{
width:12%;
}

Si quelqu'un a un peu de temps pour jeter un œil et m'expliquer les choses, je veux bien
Bonne journée

[SpaceFrog]

Le message d'erreur est explicite :

Code :

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

this.Tableau=tb;

tb ... il sort d'ou ?

[Elztx]

Oui je vois bien l’erreur dans la console et le fait qu’il sorte de nulle part mais j’essaie de comprendre ce qu’ail peut bien faire là justement... comme j’expliquais je suis un tuto et il y est dans leur code..

[NoSmoking]

Bonjour,

comme j’expliquais je suis un tuto et il y est dans leur code

tu dois mal le suivre car il n'y a pas que cela qui ne va pas tps non plus, par exemple, n'est pas défini.

Tu passes des paramètres, (cible,tableau,repertoire,duree) et tu n'en utilises aucun ????

Je pense qu'il faut que tu analyses mieux ce que tu fais car tu devais, semble t-il, plutôt avoir un truc du style

Code :

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

1
2
3
4
5
6
7
function Diaporama(cible, tableau, repertoire, duree) {
    this.Image = document.getElementById(cible);
    this.Tableau = tableau;
    this.temp = duree;
    this.repertoir_image = repertoire;
    this.tbmage = -1;
    // etc

[danielhagnoul]

Vous suivez un tutoriel qui a déjà son âge et qui comme souvent chez cette "source" est à prendre avec des réserves (exemple de code non testé) et explications plus ou moins satisfaisantes.

Correction du premier code :

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
const 
    tbdiapo = ['boule1.png', 'boule2.png', 'boule3.png', 'boule4.png', 'boule5.png', 'boule6.png'],
    repertoir_image = 'https://danielhagnoul.developpez.com/images/';
 
let tbindex = 0;
 
function Diaporama() {
    tbindex++;
    document.querySelector('#diapo_1').src = repertoir_image + tbdiapo[tbindex];
 
    if (tbindex == tbdiapo.length - 1) {
        tbindex = -1;
    }
 
    setTimeout(Diaporama, 500);
}
 
Diaporama();

Correction du deuxième code :

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
const
    tbdiapo1 = ['boule1.png', 'boule2.png', 'boule3.png', 'boule4.png', 'boule5.png', 'boule6.png'],
    tbdiapo2 = ['boule7.png', 'boule8.png'],
    tbdiapo3 = ['boule5.png', 'boule3.png', 'boule1.png', 'boule2.png'],
    repertoir_image = 'https://danielhagnoul.developpez.com/images/';
 
class Diaporama {
    constructor(cible, tableau, repertoire, duree) {
        this.Image = document.querySelector('#' + cible);
        this.Tableau = tableau;
        this.temp = duree;
        this.repertoir_image = repertoire;
        this.tbmage = -1;
        this.diap();
    }
    diap() {
        this.tbmage++;
        this.Image.src = this.repertoir_image + this.Tableau[this.tbmage];
 
        if (this.tbmage === this.Tableau.length - 1) {
            this.tbmage = -1;
        }
 
        let that = this;
 
        setTimeout(() => {
            that.diap()
        }, this.temp);
    }
}
 
new Diaporama('diapo_1', tbdiapo1, repertoir_image, 2000);
new Diaporama('diapo_2', tbdiapo2, repertoir_image, 1000);
new Diaporama('diapo_3', tbdiapo3, repertoir_image, 3000);

Les codes suivants ne sont qu'un ajout inutile, à mon sens.

[Elztx]

Hello,
Merci pour vos réponses.
Ce tuto me semblait plutôt bien détaillé mais je conçois qu'il puisse être obsolète.

( En fait pour détailler, je vais devoir faire deux tableaux, un avec les images, un autre avec les légendes qui sont donc superposés et qui défilent au même rythme.
On m'impose d'utiliser des classes et qu'il soit en POO. )

Merci pour ta correction @danielhagnoul !

Je ne comprends pas le principe d'inclure par exemple :

Code :

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

1
2
3
this.Tableau = tableau;
        this.temp = duree;
        this.repertoir_image = repertoire;

Alors qu'on ne fait pas référence à duree ou repertoire etc après.

[NoSmoking]

Alors qu'on ne fait pas référence à duree ou repertoire etc après.

sauf qu'au départ

Code :

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

1
2
3
4
5
6
7
function Diaporama(cible, tableau, repertoire, duree) {
    this.Image = document.getElementById(cible);
    this.Tableau = tableau;
    this.temp = duree;
    this.repertoir_image = repertoire;
    this.tbmage = -1;
    // etc

tu initialises des propriétés de l'objet Diaporama avec et que, plus loin, tu utilises ces propriétés dans ce bout de code par exemple

Code :

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

1
2
3
4
5
6
7
8
9
this.diap = function() {
    this.tbmage++;
    this.cible.src = this.repertoir_image + this.Tableau[this.tbmage];
    if (this.tbmage == this.Tableau.length - 1) {
        this.tbmage = -1
    }
    var that = this;
    setTimeout(that.diap, that.temp);
}

[Elztx]

D'accord merci, c'est un peu plus clair pour moi ! Je comprends de mieux en mieux !
J'ai fait une seconde méthode pour aller arrière, j'ai réussi à ajouter le contrôle au clavier, je vais essayer d'ajouter des boutons maintenant.

Merci à tous pour vos réponses !
Je peux garder ce sujet ouvert ou c'est mieux d'en créer des nouveaux pour mes futures difficultés sur mon diaporama ?

[NoSmoking]

Je peux garder ce sujet ouvert ou c'est mieux d'en créer des nouveaux pour mes futures difficultés sur mon diaporama ?

c'est mieux !

[Elztx]

Hello,

C'est noté, merci !
Je passe le sujet en résolu du coup

Bonne journée