Javascript + XHTML : problème DOM

Javascript + XHTML : problème DOM - HTML/CSS - Programmation

Marsh Posté le 03-05-2005 à 13:45:18    

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
Reply

Marsh Posté le 03-05-2005 à 13:45:18   

Reply

Marsh Posté le 03-05-2005 à 13:46:17    

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:(

Reply

Marsh Posté le 03-05-2005 à 13:46:42    

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

Reply

Marsh Posté le 03-05-2005 à 13:55:15    

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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-05-2005 à 14:07:16    

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.

Reply

Marsh Posté le 03-05-2005 à 19:33:59    

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 :)

Reply

Marsh Posté le 03-05-2005 à 19:39:49    

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.

Reply

Marsh Posté le 03-05-2005 à 20:14:40    

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;

Reply

Marsh Posté le 03-05-2005 à 23:52:40    

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
Reply

Marsh Posté le 04-05-2005 à 21:43:57    

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 ?

Reply

Marsh Posté le 04-05-2005 à 21:43:57   

Reply

Marsh Posté le 04-05-2005 à 21:51:51    

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

Reply

Marsh Posté le 05-05-2005 à 12:13:10    

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]

Reply

Marsh Posté le 05-05-2005 à 12:24:04    

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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-05-2005 à 12:36:40    

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...

Reply

Marsh Posté le 05-05-2005 à 12:38:03    

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]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-05-2005 à 12:41:09    

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.

Reply

Marsh Posté le 05-05-2005 à 15:41:23    

Et avec le DOM ça donnerait quoi ?

Reply

Marsh Posté le 05-05-2005 à 19:22:48    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed