[JS] utilisation d'un onChange

modification de valeurs

Sujet résolu

5 mars 2006 à 1:58:07

Bonsoir à vous chers Zéros!!

je n'y connais rien en javascript mais pourtant c'est bien utile et dans mon cas je pense que ça l'est aussi!
alors je viens vous pouvoir pour quérir de l'aide

voila mon "problème": j'ai un nombre de points à dépenser et des listes déroulantes qui vont de 0 à [nombre de points à dépenser]
je voudrais que quand je change le nombre dans une liste déroulante, les autres diminuent et pareille pour le nombre inscrit dans une phrase!
en clair, si j'ai 3 pts et que je choisis 1 dans une liste, les autres ne m'afficheront plus que 0 à 2!

si vous pouvez m'aider ce serai super :lol:

!!
merci d'avance

shuss

5 mars 2006 à 9:42:18

Citation : guillemot

je n'y connais rien en javascript mais pourtant c'est bien utile et dans mon cas je pense que ça l'est aussi!

Alors va voir ici. C'est un bon petit tuto pour commencer le javascript.

guillemot

5 mars 2006 à 12:13:57

bah il marque bien que c'est pour les javascripteur confirmés!!

j'ai lu le tuto mais j'ai pratiquement rien compris alors si quelqu'un pouvait m'aider pour mon problème...

shuss

5 mars 2006 à 15:19:16

Citation : guillemot

bah il marque bien que c'est pour les javascripteur confirmés!!

Où t'as vu ça o_O

Lis-le attentivement, ça te sera très utile

Sinon pour l'exemple que tu as donné, je t'ai fais ce 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" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<script language="javascript">
<!––
function equilibrer() // permet d'equilibrer les listes
{
listeA = document.getElementById("liste–a"); // on recupere la premier liste
listeB = document.getElementById("liste–b"); // puis la deuxieme
var pointsRestants = 3 – (listeA.selectedIndex + listeB.selectedIndex); // calucle des points qu'il reste à assigner
while( (listeA.length – (listeA.selectedIndex + 1) ) > pointsRestants) // Tant qie la liste a est trop longue
{
supprimer(listeA);
}
while( (listeB.length – (listeB.selectedIndex + 1) ) > pointsRestants) // Tant qie la liste b est trop longue
{
supprimer(listeB);
}
while( (listeA.length – (listeA.selectedIndex + 1) ) < pointsRestants) // Tant qie la liste a est trop courte
{
ajouter(listeA);
}
while( (listeB.length – (listeB.selectedIndex + 1) ) < pointsRestants) // Tant qie la liste b est trop courte
{
ajouter(listeB);
}
}
function supprimer(liste) // permet de supprimer l'option en trop
{
var optionASupprimer = liste.lastChild; // on recupere cet element
liste.removeChild(optionASupprimer); // et on le supprime
}
function ajouter(liste) // permet d'ajouter un option
{
var optionAAjouter = document.createElement("option"); // on crée l'option
optionAAjouter.value = liste.length; // on définit sa valeur
var texte = document.createTextNode(liste.length + ""); // on crée le texte
optionAAjouter.appendChild(texte); // on lui ajoute
liste.appendChild(optionAAjouter); // on n'ajoute l'option à la liste
}
––>
</script>
</head>
<body>
<form>
<select id="liste–a" onChange="javascript:equilibrer();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="liste–b" onChange="javascript:equilibrer();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form>
</body>
</html>

La logique y est mais il te reste à l'adapter à tes besoins.
Alors essai de te mettre au javascript, beaucoup trop de personnes disent qu'elles n'y comprenent rien, mais c'est pas si compliqué

Petite note : Si quelqu'un pouvait améliorer la coloration du code pour qu'il puisse reconnaitre le javascript à l'interieur d'une page HTML, ça serait pas mal (ou au moins reconnaitre mon code comme commentaire, parce qu'il y a quand même )

guillemot

5 mars 2006 à 15:26:44

merci pour ce code!!
je vais le lire attentivement et tenter de le comprendre au mieux pour pouvoir le réutiliser et le modieir à ma guise!!

je veux bien apprendre le javascript mais je connais pas de site où il y a un cours du même style que ceux du sdz!!
si tu connais une bonne adresse je serais heureux d'aller naviguer dessus!!

j'ai testé ton code: quand je choisit un nombre dans une des 2 listes, la 2ème liste ne change pas...

shuss

5 mars 2006 à 17:10:26

Alors là, je suis devant le bug du siecle !!! (au moins

)

Bon : J'ai mis mes deux script en lignes :

le premier, qui marche parfaitemnt.
le deuxième, qui ne marche pas (cf guillemot juste au dessus).

J'ai essayé de les comparer dans tous les sens mais ils sont TOTALEMENT identiques

Celui qui trouve la solution a ... ma reconnaissance éternelle (c'est déjà ça

).

Sinon guillemot, fait "enregistrer sous" pour le lien qui marche.

guillemot

5 mars 2006 à 17:44:40

en fait ils ne sont identiques que quand on les regardes normalement!!
mais en fait il y avait 2 problèmes:
- le premier code était en format dos/windows et non unix!!
- dans le premier code, les - n'étaient pas considérés comme tel;

shuss

5 mars 2006 à 20:25:49

Citation : guillemot

en fait ils ne sont identiques que quand on les regardes normalement!!
mais en fait il y avait 2 problèmes:
- le premier code était en format dos/windows et non unix!!
- dans le premier code, les - n'étaient pas considérés comme tel;

Du coup, c'est toi qui me donne mal de tête o_O

Bon on va faire avec, l'important c'est que ça fonctionne ! (Sinon, pourquoi ça me fait ça ???)

guillemot

5 mars 2006 à 23:14:48

alors là j'en ai aucune idée!!!