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

Signaler
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
-
 malasa -
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 :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sIMPLE sLIDE sHOW sCRIPT</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <script language="JavaScript" type="text/javascript">
   <!--
   //  sIMPLE sLIDE sHOW with Description sCRIPT by Chetan M Soni(csoni@email.com), 8/1999.
   //
   //  NOTICE: To my knowledge this script works with Netscape 3.0+ and Internet Explorer 4.0+.
   //  By using this script you agree that I am not responsible for any type of damage it causes.
   //  To use this script freely, you must leave this comment intact.
   //
   //  If you need help using the script, email me at csoni@email.com, and I'll be happy to help.

   //  Browser checker

   Browser_Name = navigator.appName;
   Browser_Ver  = parseInt(navigator.appVersion);
   if((Browser_Name == "Netscape" && Browser_Ver >= 3) || (Browser_Name == "Microsoft Internet Explorer" && Browser_Ver >= 4)) Browser_Gen = ">=3rd";
   else Browser_Gen = "<3rd";

   if (Browser_Gen == '>=3rd') {
   num_of_slides = 4;    // Declare the number of slides in your show
   slide_num = 1;        // Which slide loads ups first

   // 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.";
   }

   //  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 = 4;    // 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"');
     //  Changes the description box
     eval('document.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
   }
   // end hiding contents -->
   </script>

   <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #b0c4de;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      height : 100%;
      text-align: left;
      border : 1px solid #f0ffff;
      background-color: #f0f8ff;
      }
    img {
      border : 1px solid #888;
      }
/*    img {
      border-width : 0;
      border : none;
      }*/
  #expliq {
    position : absolute;
    left : 30px;
    top : 0;
    font-family: 'Trebuchet MS', Verdana, sans-serif;
    font-size : .6em;
    color : #777;
    }
  #lecteur {
    position : relative;
    background : url(it.png) left top no-repeat;
    width : 640px;
    height : 585px;
    margin : 2em auto;
    }
  #dia {
    position : absolute;
    left : 0;
    top : 76px;
    }
  .btn {
    position : absolute;
    top : 17px;
    width : 55px;
    height : 55px;
    }
  #descbox {
    position : absolute;
    top : 22px;
    left : 257px;
    width : 341px;
    height : 46px;
    background-color : transparent;
    font-family: 'Trebuchet MS', Verdana, sans-serif;
    font-size : .9em;
    color : #676;
    border : none;
    }
    </style>
</head>
<body  onload="changeslide()">
  <div id="conteneur">
    <div id="lecteur">
      <p id="expliq">Cliquez sur les boutons pour feuilleter l'album</p>
      <form id="descform" action="none">
        <textarea id="descbox" rows=3 cols=30 onFocus="this.blur()"></textarea> <!-- wrap=virtual  -->
      </form>
      <a href="javascript:firstslide()"><img src="btn_debut.png" class="btn" style="left:30px;" alt="bouton debut" /></a>
      <a href="javascript:prevslide()"><img src="btn_gauche.png" class="btn" style="left:80px;" alt="bouton gauche" /></a>
      <a href="javascript:nextslide()"><img src="btn_droite.png" class="btn" style="left:130px;" alt="bouton droite" /></a>
      <a href="javascript:lastslide()"><img src="btn_fin.png" class="btn" style="left:180px;" alt="bouton fin" /></a>
      <div id="dia">
        <img id="picbox" src="Paris1.jpg" width="640" height="480" />
      </div>
    </div>
<br>
  </div>
</body>
</html>

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

--

13 réponses

Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 276
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...
Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 276
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) + '"');
   }
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
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.

--
Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 276
rien compris a ton message... :s
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
J'ai commencé à répondre à ta 1re réponse entre tes 2 messages.

Dans un autre document, j'utilise un <form>.
Je fais référence aux éléments de ce formulaire en précisant bien “.forms”.
Et là, je n'avais pas vu que ça manquait. C'était déjà absent du script d'origine.

J'ai la possibilité d'adapter un autre diaporama. Plus complet.
Est-ce que je dois abandonner celui dont on parle ?

--
Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 276
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 ...
Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
601
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.

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--

function lireDescbox()
{
	alert(document.getElementById("descbox").value);
}

function ecrireDescbox()
{
	document.getElementById("descbox").value = document.getElementById("nouveau").value;
}

-->
</script>
</head>

<body>
<form id="descform">
<textarea id="descbox" rows="3" cols="30">
Ceci est un essai de texte
sur 2 lignes.
</textarea> 
<br />
<input type="button" value="Lire le contenu du textarea via DOM" onclick="lireDescbox()">
<br />
<br />
Nouveau texte <input id="nouveau" type="text" value=""><br />
<input type="button" value="Ecrire le contenu du textarea via DOM" onclick="ecrireDescbox()">
</form>
</body>
</html>




Voilà maintenant à toi d'adapter le script
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
“ça sert à quoi que je m'embête à t'expliquer”
C'est vrai ça. Non mais (-;

J'y ai pensé, bien sûr, mais de là à appliquer à partir d'un exemple…
Vraiment, ça me plaît cette manière de considérer le document.

Je vais essayer d'adapter.
Encore un peu plus.

Merci.

--
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
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é. ✌

Me reste à comprendre “eval”.


Merci à vous.

--
Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 276
Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
601
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.
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
Ah oui, merci.

C'est plus clair que https://www.zdnet.fr/

“utilisé eval partout ne sert à rien”
J'avais commencé à me demander si, dans mon contexte, pour une simple expression, c'était vraiment utile.
Je vais les supprimer.


> gryzzly > T'as vu celle-là (avec une précision en #21) aussi ?

--
Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 276
Chapeau, merci pour ces explications ;-)
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
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.\nDans 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 + ' : ' + '\n' + desc[slide_num];
   }

--
Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
601
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.\nDans 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 
    + ' : ' + '\n' + 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.\nDans 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.
je veux lire ou regarder tous vos emission
c'est pour ça vous pouvez emetez votre documents dans ma boite