[JS] document.--- has no properties Résolu

Question

Bonjour, Je suis en train d'adapter une petite visionneuse d'images en Javascript. C'est rudimentaire, mais ça fonctionne assez bien. Je rencontre un problème avec Firefox. Alors qu'il affichait ce que j'attendais, j'ai modifié (quoi ??? Saipu) la structure de la page (validation) et il me signale maintenant “document.descform has no properties”. Et refuse d'afficher le contenu de “descbox” qui est dans les “desc—”. Autrement dit, il fonctionne, fait défiler les images, mais refuse d'afficher les légendes dans le formulaire. Comment ça “no properties” ? Comment y remédier ? Voilà le code de la page : sIMPLE sLIDE sHOW sCRIPT

Cliquez sur les boutons pour feuilleter l'album

++ Merci de ne pas me proposer d'autres solutions de diaporama. J'en ai. --

gryzzly · Answer

Salut Gihef

Je connais que dalle a javascript...
et pourtant après 30 minutes à chercher sur internet sur le fonctionnement des déclarations DOM:

   function changeslide(){        
     //  Changes the slide
     eval('document.picbox.src = "Paris' + slide_num + '.jpg"');
     //  Changes the description box
     eval("document.forms.descform.descbox.value = 'Image " + slide_num + "/" + num_of_slides + " : " + eval("desc" + slide_num) + "'");
   }


PS : utilises les entités html plutôt que les lettres accentuées...
PPS : il marche pas sous IE ton scrpt, j'ai une erreur : document.picbox a la valeur Null ou n'est pas un objet . et ce avant que j'intervienne dessus. et par contre, j'arrive pas a corriger...

gryzzly · Answer

J'ai trouvé :

Sous Firefox :
   function changeslide(){        
     //  Changes the slide
     eval('document.picbox.src = "Paris' + slide_num + '.jpg"');
     //  Changes the description box
     eval('document.forms.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
   }


Sous IE (v7) :
   function changeslide(){        
     //  Changes the slide
     eval('picbox.src = "Paris' + slide_num + '.jpg"');
     //  Changes the description box
     eval('document.forms.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
   }

Gihef · Answer

Merci l'ours.

Le pire c'est que, dans un autre truc, je fais avec, présent, “.forms.nom_du_form”
Tu m'as vu ? Tu m'as pas vu ?

“j'arrive pas a corriger”
Dommage…

J'en ai un plus intéressant.
J'abandonne ?


<edit>
Merci encore.

--

gryzzly · Answer

rien compris a ton message... :s

gryzzly · Answer

Pourquoi veux tu l'abandonner ?
Il fonctionne bien non ?

Il te suffirait de faire un test supplémentaire : 
si IE alors ... sinon ... 
pour le probleme de "document.nom-id-img.src"

A toi de voir si tu veux une "usine a gaz", ou un script léger comme celui dont il est question dans ce post ...

PhP · Answer

Bsr Alors ça sert à quoi que je m'embête à t'expliquer ce qu'est DOM ??? LOL Ton script date de ... 1999 c'est de la préhistoire ! ;-) Aujourd'hui il faut utiliser DOM pour accèder aux objets de la page en JavaScript à moins d'avoir envie de se faire ch... avec la syntaxe obsolète, propriétaire et incompatible des différents navigateurs. voici un petit exemple qui fonctionne sous IE et FF : hé oui tu ne rêves pas j'utilise encore et toujours la fonction "magique" getElementById() ! Tu noteras que l'id du formulaire, ici descform, n'est d'ailleurs pas nécessaire. Voilà maintenant à toi d'adapter le script

Gihef · Answer

eval('document.getElementById("picbox").src = "Paris' + slide_num + '.jpg"');
('desc' + slide_num) + '"');
eval('document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
Hé, hé. &#9996;

Me reste à comprendre “eval”.


Merci à vous.

--

gryzzly · Answer

https://www.w3schools.com/jsref/jsref_eval.asp

PhP · Answer

Bonjour

La fonction eval(expr) sert donc comme tu le sais maintenant à évaluer une expression (une chaîne de caractères) 
comme s'il s'agissait d'un code JavaScript. 
Dit comme ça on se demande bien à quoi ça peut servir hein ?

Petite précision : cette fonction n'est à utiliser que lorsque le code JavaScript n'est pas connu à l'avance 
et qu'il doit être généré dynamiquement à l'exécution lorsque l'utilisateur agit sur la page.

Attention : fonction pratique, certe, mais à utiliser avec modération car il est très difficile, voir impossible de déboguer 
le code ainsi généré !
Inutile de dire que si l'expression contient n'importe quoi le résultat est imprévisible ... En général ça plante ! ;-(


Maintenant dans ton exemple :
eval('document.getElementById("picbox").src = "Paris' + slide_num + '.jpg"');
eval('document.getElementById("descbox").value = "Image ' + slide_num + '/' 
+ num_of_slides + ' : ' + eval('desc' + slide_num) + '"');

utilisé eval partout ne sert à rien ! Et imbriquer les eval() alors là c'est chaud ! ;-)

En effet tu as tout intérêt à écrire directement :

document.getElementById("picbox").src = "Paris' + slide_num + '.jpg";
document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides + ' : ' 
+ eval('desc' + slide_num)';

Que fait eval() ici ?
Supposons que slide_num contienne la valeur 1 

Alors

eval('desc' + slide_num) devient eval('desc1') ce qui retourne le contenu de la variable desc1 et non pas 
la chaîne "desc1" évidemment.

Bref c'est comme si tu avais écrit en dur le code JavaScript suivant :
document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides 
+ ' : ' +desc1;

Utiliser eval ici est une bonne idée mais il serait bcp plus judicieux d'utiliser un tableau !

   // Description of each slide
   desc1 = "Le Trocadéro vu de la Tour Eiffel. Dans le lointain, la Défense.";
   desc2 = "Place de la Concorde et l'Obélisque.";
   desc3 = "Notre-Dame vue d'un square sur la rive gauche.";
   desc4 = "La cour du Louvre et sa Grande Pyramide.";

devient 
   // Description of each slide
   desc = new Array();
   desc[0] = "Le Trocadéro vu de la Tour Eiffel. Dans le lointain, la Défense.";
   desc[1] = "Place de la Concorde et l'Obélisque.";
   desc[2] = "Notre-Dame vue d'un square sur la rive gauche.";
   desc[3] = "La cour du Louvre et sa Grande Pyramide.";


et le code :

document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides 
+ ' : ' + desc[slide_num-1] ;
C'est propre, c'est joli et plus de fonction eval() allez hop ! ;-)

Nota : j'ai mis slide_num-1 et pas slide_num car les tableaux commençent toujours à l'index 0. 
Ceci dit tu peux passer outre.

gryzzly · Answer

Chapeau, merci pour ces explications ;-)

Gihef · Answer

Et puis, l'obligation d'avoir des noms d'image sous la forme img1, img2, img3… Bof.

Alors, est-ce que j'ai bien compris la leçon ?   num_of_slides = 4;    // Declare the number of slides in your show
   slide_num = 1;        // Which slide loads ups first

   // Description of each slide
   desc = new Array();
   desc[1] = "Le Trocadéro vu de la Tour Eiffel.
Dans le lointain, la Défense.";
   desc[2] = "Place de la Concorde et l'Obélisque.";
   desc[3] = "Notre-Dame vue d'un square sur la rive gauche.";
   desc[4] = "La cour du Louvre et sa Grande Pyramide.";

   // Declaration of each image
   chemin="../../_images/_ital/";
   image = new Array();
   image[1] = "downtownparis5.jpg";
   image[2] = "DSCF0160_s.jpg";
   image[3] = "IMG_0268.jpg";
   image[4] = "ricorocks_p1010018.jpg";

   //  These functions alter the slide_num accordingly
   function firstslide(){
     slide_num = 1;
     changeslide();
   }
   function prevslide(){
     slide_num = slide_num - 1;
     if(slide_num < 1){
       slide_num = num_of_slides;
     }
     changeslide();
   }
   function nextslide(){
     slide_num = slide_num + 1;
     if(slide_num > num_of_slides){
       slide_num = 1
     }
     changeslide();
   }
   function lastslide(){
     slide_num = num_of_slides;    // Declare the highest number of slides in your show
     changeslide();
   }

   //  This function changes the slide and the description box according to the slide_num
   function changeslide(){        
     //  Changes the slide
     //eval('document.picbox.src = "Paris' + slide_num + '.jpg"');
     //document.getElementById("picbox").src = 'Paris' + slide_num + '.jpg';
   document.getElementById("picbox").src = chemin + image[slide_num];
     //  Changes the description box
     //eval('document.forms.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
     //document.getElementById("descbox").value = 'Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num);
     //document.getElementById("descbox").value = 'Image ' + slide_num + '/' + num_of_slides + ' : ' + desc[slide_num];
   document.getElementById("descbox").value = 'Image ' + slide_num + '/' + num_of_slides + ' : ' + '
' + desc[slide_num];
   }

--

PhP · Answer

B'soir

C'est tout à fait ça !

Juste un p'tit détail : je t'ai dis qu'en JavaScript les tableaux étaient zero based index ,bref leur premier élément commence tjrs à l'indice 0

En JavaScript un tableau est un objet qui possède entres autres la propriété length qui retourne le nombre d'éléments présents dans le tableau

Ex :
  image = new Array();
   image[1] = "downtownparis5.jpg";
   image[2] = "DSCF0160_s.jpg";
   image[3] = "IMG_0268.jpg";
   image[4] = "ricorocks_p1010018.jpg";

alert(image.length);   // Affiche 5

bref ton tableau image contient 5 éléments (hé oui) et non pas 4 ! L'élément zéro est "undefined" mais il est quand même pris en compte.

Il est donc plus pratique d'utiliser l'index 0. De cette façon tu peux même te passer de la variable num_of_slides 

L'astuce c'est de considérer que slide_num varie entre 0 et n-1 et non plus entre 1 et n

Ex :

   
   slide_num = 0;        // Which slide loads ups first

   // Description of each slide
   desc = new Array();
   desc[0] = "Le Trocadéro vu de la Tour Eiffel.
Dans le lointain, la Défense.";
   desc[1] = "Place de la Concorde et l'Obélisque.";
   desc[2] = "Notre-Dame vue d'un square sur la rive gauche.";
   desc[3] = "La cour du Louvre et sa Grande Pyramide.";

   // Declaration of each image
   chemin="../../_images/_ital/";
   image = new Array();
   image[0] = "downtownparis5.jpg";
   image[1] = "DSCF0160_s.jpg";
   image[2] = "IMG_0268.jpg";
   image[3] = "ricorocks_p1010018.jpg";

   //  These functions alter the slide_num accordingly
   function firstslide(){
     slide_num = 0;
     changeslide();
   }
   function prevslide(){
     slide_num = slide_num - 1;
     if(slide_num < 0){
       slide_num = image.length-1;
     }
     changeslide();
   }
   function nextslide(){
     slide_num = slide_num + 1;
     if(slide_num >= image.length){
       slide_num = 0
     }
     changeslide();
   }
   function lastslide(){
     slide_num = image.length;    // Declare the highest number of slides in your show
     changeslide();
   }

   //  This function changes the slide and the description box according to the slide_num
   function changeslide(){        
     //  Changes the slide
   document.getElementById("picbox").src = chemin + image[slide_num];
     //  Changes the description box
   document.getElementById("descbox").value = 'Image ' + (slide_num+1) + '/' + image.length 
    + ' : ' + '
' + desc[slide_num];
   }

Et si tu veux de passer des indices tu peux même écrire :

   desc = new Array();
   desc.push( "Le Trocadéro vu de la Tour Eiffel.
Dans le lointain, la Défense.");
   desc.push( "Place de la Concorde et l'Obélisque.");
   desc.push("Notre-Dame vue d'un square sur la rive gauche.");
   desc.push("La cour du Louvre et sa Grande Pyramide.");

Et hop plus de prise de tête avec les indices. Les indices existent bien sûr toujours. C'est juste une autre façon d'ajouter des éléments à un tableau en utilisant la méthode (ou fonction) push() de l'objet Array.

Enfin tu pourrais aller encore plus loin en créant ton propre objet Slide en JavaScript : pratique si tu modifies souvent ton slide ou que tu veux le faire évoluer en intégrant des petites images de preview, des dates etc ... Mais ceci dépasse le cadre de ce post.

malasa · Answer

je veux lire ou regarder tous vos emission 
c'est pour ça vous pouvez emetez votre documents dans ma boite

[JS] document.--- has no properties

13 réponses

Votre réponse

Discussions similaires