Sujet Précédent Sujet Suivant

[JS] document.--- has no properties

Résolu/Fermé
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 19 oct. 2007 à 19:28
 malasa - 1 juil. 2008 à 14:51
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

Réponse 1 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
19 oct. 2007 à 20:14
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...
0
Réponse 2 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
19 oct. 2007 à 20:21
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) + '"');
   }
0
Réponse 3 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
19 oct. 2007 à 20:26
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.

--
0
Réponse 4 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
19 oct. 2007 à 20:31
rien compris a ton message... :s
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
19 oct. 2007 à 20:49
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 ?

--
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
19 oct. 2007 à 20:54
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 ...
0
Réponse 6 / 13
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
19 oct. 2007 à 21:30
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
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
19 oct. 2007 à 22:15
“ç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.

--
0
Réponse 7 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
20 oct. 2007 à 00:23 
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.

--
0
Réponse 8 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
20 oct. 2007 à 00:38
https://www.w3schools.com/jsref/jsref_eval.asp
0
Réponse 9 / 13
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
20 oct. 2007 à 14:21
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.
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
20 oct. 2007 à 23:10
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 ?

--
0
Réponse 10 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
20 oct. 2007 à 14:37
Chapeau, merci pour ces explications ;-)
0
Réponse 11 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
21 oct. 2007 à 02:11
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];
   }

--
0
Réponse 12 / 13
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
22 oct. 2007 à 20:30
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.
0
Réponse 13 / 13
malasa
1 juil. 2008 à 14:51
je veux lire ou regarder tous vos emission
c'est pour ça vous pouvez emetez votre documents dans ma boite
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
"no tftp response" téléphone alcatel ip 4018
almoal -
almoal -

1 réponse
A java exception has occurred minecraft
moi83310 -
NathLeBg -

14 réponses
Disque dur qui ne boot pas: no boot disk has been detected...
Utilisateur anonyme -
Utilisateur anonyme -

9 réponses
Où trouver Hajime No Ippo VF ?
MisterArm -
Nuumaki -

13 réponses