Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1846 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Javascript + XHTML : problème DOM

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Javascript + XHTML : problème DOM

n°1070351
Je@nb
Kindly give dime
Posté le 03-05-2005 à 13:45:18  profilanswer
 

Salut,
J'essaie de me faire un petit script pour améliorer mes capacités en JS et tout particulièrement j'essaie de bien faire séparation structure comportement.
Ce que je veux faire est tout con : j'ai un select avec diverses options et un paragraphe. Je veux que lorsque on change l'élément dans la liste, ça affiche la valeur de l'option dans le paragraphe.
 
Voici ce que j'ai fait :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title>Modifier le contenu d'un div par listbox</title>
  5.  <link rel="stylesheet" type="text/css" href="style.css"/>
  6.  <script type="text/javascript" src="script.js" />
  7. </head>
  8. <body>
  9.  <p id="para"></p>
  10.  <form action="test.html" method="get" id="formulaire">
  11.   <fieldset>
  12.    <legend>Liste de choix :</legend>
  13.    <select id="liste">
  14.     <optgroup label="Choix">
  15.      <option value="J'ai fait mon choix 1">Choix 1</option>
  16.      <option value="J'ai fait mon choix 2">Choix 2</option>
  17.      <option value="J'ai fait mon choix 3">Choix 3</option>
  18.      <option value="J'ai fait mon choix 4">Choix 4</option>
  19.      <option value="J'ai fait mon choix 5">Choix 5</option>
  20.     </optgroup>
  21.    </select>
  22.   </fieldset>
  23.  </form>
  24. </body>
  25. </html>


 
Mon script.js comporte ça :
 

Code :
  1. var List = document.getElementById('liste');
  3. function ChangerList() {
  4. var Bloc = document.getElementById('para');
  5. Bloc.innerHTML = List.value;
  6. }
  8. List.onChange = ChangerList;


 
Cependant rien ne marche, la console JS de Firefox ne me dit rien, IE me dit blabla activex, contenu à risque et qd je lui dit oui qd même j'ai une page blanche. Sous firefox j'ai bien la page mais rien comme action.
J'ai loupé qqch ?


Message édité par Je@nb le 03-05-2005 à 19:35:21
mood
Publicité
Posté le 03-05-2005 à 13:45:18  profilanswer
 

n°1070354
Je@nb
Kindly give dime
Posté le 03-05-2005 à 13:46:17  profilanswer
 

Ah oui, j'ai mis DOM dans le sujet :D
 
En fait je pensais vu que ça ne marchait pas à utiliser les fonctions DOM mais le problème c'est que je n'ai pas trouver comment remplir de texte un node ?
 
newpara = document.createElement('p');
 
Voilà ce que j'ai pour l'instant:(

n°1070355
FlorentG
Posté le 03-05-2005 à 13:46:42  profilanswer
 

Ben ouais [:moule_bite]. T'as mis l'affectation de la fonction ChangerList DANS la fontion ChangerList, faut la mettre après ;)

n°1070380
masklinn
í dag viðrar vel til loftárása
Posté le 03-05-2005 à 13:55:15  profilanswer
 

faut utiliser window.onload pour charger ton script, sinon le script se charge et tente de s'exécuter avant que la page ne soit créée et ça peut pas marcher


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1070405
cerel
Posté le 03-05-2005 à 14:07:16  profilanswer
 

Aussi faut faire attention a la casse.
En effet, onChange n'est pas la meme chose que onchange. Et les evenements sont en minuscules, donc la tu as cree une propriete au lieu d'affecter une valeur a une deja existente.

n°1070877
Je@nb
Kindly give dime
Posté le 03-05-2005 à 19:33:59  profilanswer
 

FlorentG a écrit :

Ben ouais [:moule_bite]. T'as mis l'affectation de la fonction ChangerList DANS la fontion ChangerList, faut la mettre après ;)


 
Oups, petite erreur de copier coller, en effet elle est après, je corrige ça :)
 

masklinn a écrit :

faut utiliser window.onload pour charger ton script, sinon le script se charge et tente de s'exécuter avant que la page ne soit créée et ça peut pas marcher


 
Comment ça je ne comprend pas, je met pas window.onload = ChargerScript; quand même ?
 

cerel a écrit :

Aussi faut faire attention a la casse.
En effet, onChange n'est pas la meme chose que onchange. Et les evenements sont en minuscules, donc la tu as cree une propriete au lieu d'affecter une valeur a une deja existente.


 
Je vais essayer :)

n°1070887
Je@nb
Kindly give dime
Posté le 03-05-2005 à 19:39:49  profilanswer
 

Alors pour la casse, ça n'a pas l'air de changer, j'ai changé <script ... /> par <script ... ></script> maintenant IE m'affiche ma page mais le script marche pas.

n°1070926
Je@nb
Kindly give dime
Posté le 03-05-2005 à 20:14:40  profilanswer
 

Alors j'ai fait qq modifications, ça marche sur IE et sous Firefox ça efface tout mon paragraphe à chaque changement.
En fait j'ai l'impression que List n'était pas connu dans la fonction, je pensais que j'avais déclaré globalement List mais en fait ça marche pas comme ça en JS.
 
Du coup ça ressemble à ça :

Code :
  1. var List = document.getElementById('liste');
  3. function ChangerList() {
  4. var List = document.getElementById('liste');
  5. var Bloc = document.getElementById('para');
  6. Bloc.innerHTML = List.value;
  7. }
  9. List.onchange = ChangerList;

n°1071171
FlorentG
Posté le 03-05-2005 à 23:52:40  profilanswer
 

Comme l'a dit Masklinn, faut mettre l'affectation du onchange dans le onload :

function changerList() {
  document.getElementById('para').innerHTML = document.getElementById('liste').value;
}
function init() {
  document.getElementById('liste').onchange = changerListe;
}
window.onload = init;


Message édité par FlorentG le 03-05-2005 à 23:52:48
n°1072441
Je@nb
Kindly give dime
Posté le 04-05-2005 à 21:43:57  profilanswer
 

Merci en effet ça marche, suffit juste de rajouter un e au nom de la fonction ou le virer lors de l'affectation :D
 
Cependant ça ne marche que sur IE, sur firefox il me vide mon p et ne me met rien à la place, il y a pas un problème qq part ?

mood
Publicité
Posté le 04-05-2005 à 21:43:57  profilanswer
 

n°1072450
Je@nb
Kindly give dime
Posté le 04-05-2005 à 21:51:51  profilanswer
 

En renommant ma page de .xhtml en .html ça marche :D
Voir cette page pour l'info du bug de firefox : http://www.quirksmode.org/dom/test [...] test.xhtml

n°1072728
FlorentG
Posté le 05-05-2005 à 12:13:10  profilanswer
 

Je@nb a écrit :

En renommant ma page de .xhtml en .html ça marche :D
Voir cette page pour l'info du bug de firefox : http://www.quirksmode.org/dom/test [...] test.xhtml


Moi je ne vois pas ça comme un bug... Un truc genre innerHTML dans des pages XHTML (donc XML), c'est un peu naze [:spamafote]

n°1072739
masklinn
í dag viðrar vel til loftárása
Posté le 05-05-2005 à 12:24:04  profilanswer
 

FlorentG a écrit :

Moi je ne vois pas ça comme un bug... Un truc genre innerHTML dans des pages XHTML (donc XML), c'est un peu naze [:spamafote]


http://annevankesteren.nl/archives/2005/05/innerhtml


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1072752
FlorentG
Posté le 05-05-2005 à 12:36:40  profilanswer
 

masklinn a écrit :

http://annevankesteren.nl/archives/2005/05/innerhtml


Ca me plaît quand-même pas :D Déjà je vois pas la différence entre setContent... Ensuite faudrait rebaptiser en innerXML...

n°1072753
masklinn
í dag viðrar vel til loftárása
Posté le 05-05-2005 à 12:38:03  profilanswer
 

FlorentG a écrit :

Ca me plaît quand-même pas :D Déjà je vois pas la différence entre setContent... Ensuite faudrait rebaptiser en innerXML...


:D
 
Ca dépend de la manière dont c'est implémenté, et il faut bien se rendre compte que le gain de vitesse entre DOM et innerHTML est d'un rapport 10 [:spamafote]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1072756
FlorentG
Posté le 05-05-2005 à 12:41:09  profilanswer
 

masklinn a écrit :

:D
 
Ca dépend de la manière dont c'est implémenté, et il faut bien se rendre compte que le gain de vitesse entre DOM et innerHTML est d'un rapport 10 [:spamafote]


Héhé c'est sûr. Bon en fait, après vérification, un setContent va escaper tout ce qui est < ou > en &lt; etc.

n°1072931
Je@nb
Kindly give dime
Posté le 05-05-2005 à 15:41:23  profilanswer
 

Et avec le DOM ça donnerait quoi ?

n°1073153
FlorentG
Posté le 05-05-2005 à 19:22:48  profilanswer
 

Faut utiliser des méthodes genre createElement, setContent et appendChild


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Javascript + XHTML : problème DOM

 

Sujets relatifs
[Applet Java] Problème d'applet[ComponentOne] Problème sûrement très bête !!
Problème avec addKeyListener[javascript et PHP]Pb avec saut de ligne[résolu]
Probleme de requette[HTML /JAVASCRIPT je crois] probleme formulaire
Problème d'UlpoadProbleme client en perl
Probleme de JOIN (je pense) 
Plus de sujets relatifs à : Javascript + XHTML : problème DOM

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.076 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)