Javascript + XHTML : problème DOM

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Javascript + XHTML : problème DOM

Je@nb

Kindly give dime

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Modifier le contenu d'un div par listbox</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js" />
</head>
<body>
<p id="para"></p>
<form action="test.html" method="get" id="formulaire">
<fieldset>
<legend>Liste de choix :</legend>
<select id="liste">
<optgroup label="Choix">
<option value="J'ai fait mon choix 1">Choix 1</option>
<option value="J'ai fait mon choix 2">Choix 2</option>
<option value="J'ai fait mon choix 3">Choix 3</option>
<option value="J'ai fait mon choix 4">Choix 4</option>
<option value="J'ai fait mon choix 5">Choix 5</option>
</optgroup>
</select>
</fieldset>
</form>
</body>
</html>

Mon script.js comporte ça :

Code :

var List = document.getElementById('liste');
function ChangerList() {
var Bloc = document.getElementById('para');
Bloc.innerHTML = List.value;
}
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

Publicité

Je@nb

Kindly give dime

Ah oui, j'ai mis DOM dans le sujet

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

FlorentG

Unité de Masse

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

masklinn

í dag viðrar vel til loftárása

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

cerel

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@nb

Kindly give dime

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 :

Je vais essayer

Je@nb

Kindly give dime

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.

Je@nb

Kindly give dime

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 :

var List = document.getElementById('liste');
function ChangerList() {
var List = document.getElementById('liste');
var Bloc = document.getElementById('para');
Bloc.innerHTML = List.value;
}
List.onchange = ChangerList;

FlorentG

Unité de Masse

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

Je@nb

Kindly give dime

Merci en effet ça marche, suffit juste de rajouter un e au nom de la fonction ou le virer lors de l'affectation

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 ?

Publicité

Je@nb

Kindly give dime

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

FlorentG

Unité de Masse

Je@nb a écrit :

En renommant ma page de .xhtml en .html ça marche
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]

masklinn

í dag viðrar vel til loftárása

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

FlorentG

Unité de Masse

masklinn a écrit :

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

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

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

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

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

FlorentG

Unité de Masse

masklinn a écrit :

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

Je@nb

Kindly give dime

Et avec le DOM ça donnerait quoi ?

FlorentG

Unité de Masse

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

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'Ulpoad	Probleme client en perl
Probleme de JOIN (je pense)
Plus de sujets relatifs à : Javascript + XHTML : problème DOM

Page générée en 0.093 secondes