11286 sujets

JavaScript, DOM et API Web HTML5

Bonjours, je suis nouveau dans le js, et je voulais faire un tableau à qui dans chaque case, se trouve une liste déroulante avec des images, par chances, j'ai trouvé sur un forum le programme qui me permettait d'avoir les images dans la liste déroulante, j'ai réussi a l'inséré dans un tableau html, mais la j'ai un petit problème, je prend l'exemple de seulement 2 case de tableau donc avec 2 liste déroulante, quand je clique sur ma liste déroulante dans ma première case puis sur une image au choix, elle s'y affiche (niquel), mais pour la deuxième case du tableau, elle renvoie son image vers la case 1. Par la logique des chose, je me suis dit, que mon script dans la case 2 avait le même Id que la case 1, donc oui c’était le cas, mais quand je met des id différent, sa refait la même chose mais inversement, c'est a dire que la case 2 fonctionne, mais pas la 1ere case, cette dernière envoie son image ver la case 2. Je comprend pas pourquoi. Pouvez vous m'aidez svp Smiley ohwell

Mon js:

 <script>
function change() {
    select = document.getElementById("1");
    select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage;
}

function change() {
    select = document.getElementById("2");
    select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage;
}
</script>


mon tabeau :
<table>
	<tbody>
	   <tr>
	      <td>
		 <select id="1" onchange="change();"  width:10px; height:10px;">
		    <option style="background:url('Etape1.jpg') no-repeat; width:10px; height:10px;"></option><option style="background:url('Etape2.jpg') no-repeat; width:10px; height:10px;"></option>
		    <option style="background:url('Etape3.jpg') no-repeat; width:10px; height:10px;"></option>
		    <option style="background:url('Etape4.jpg') no-repeat; width:10px; height:10px;"></option>
		 </select>
	      </td>
	   </tr>  
	   <tr>
	      <td>
		 <select id="2" onchange="change();"  width:10px; height:10px;">
		    <option style="background:url('Etape1.jpg') no-repeat; width:10px; height:10px;"></option><option style="background:url('Etape2.jpg') no-repeat; width:10px; height:10px;"></option>
		    <option style="background:url('Etape3.jpg') no-repeat; width:10px; height:10px;"></option>
		    <option style="background:url('Etape4.jpg') no-repeat; width:10px; height:10px;"></option>
		 </select>
	      </td>
	   </tr>      
	</tbody>
</table>


Merci de votre aide, à bientôt

Cordialement
Modérateur
Salut !

Alors d'abord il y a des trucs chelou dans ton code :
<select id="1" onchange="change();"  width:10px; height:10px;">

Je ne sais pas si c'est à la recopie mais il manque l'attribut style si tu veux mlettre du CSS là il est posé sans rien et avec une quote sur deux.

Ensuite... on va reprendre un peu le raisonnement de ce que tu as fait (j'écrème un peu le code pour mettre n évidence ce qui nous intéresse) :
<select id="1" onchange="change();"></select>
<select id="2" onchange="change();"></select>

 <script>
function change() {
   console.log('blablabla');
}
function change() {
   console.log('blobloblo');
}
</script>


Avec juste ca, pourrais-tu me dire quelle fonction va être exécutée pour quel select ? Smiley smile
Honnêtement oui c'est de la recopie, un code que j'ai trouvé. donc je sais pas pourquoi il y a du css la mais a la base le code fonctionne bien pour son utilité d'origine (mettre une image en cliquant sur la liste déroulante)

Ensuite tu me dit de te dire quelle fonction va être exécuté pour quel select, et bas la je pourrai pas te dire car je sais pas non plus.. Smiley sweatdrop .

Mais je pense que a la place de ton "blablabla" tu met l'id "1" pour que sa fonction soit associer au select dons l'id est & et idem pour le "2" avec la fonction qui a "blobloblo". Et si c'est pas le cas bas.. je pourrai rien te dire de plus sur cette fonction désolé.

J'ai pas encore eu de cours sur le javascript en classe, le brin de connaissance que j'ai sont en désordre complet... Smiley ohwell

Merci _laurent

Cordialement
Modérateur
Kizars a écrit :
Honnêtement oui c'est de la recopie, un code que j'ai trouvé. donc je sais pas pourquoi il y a du css la mais a la base le code fonctionne bien pour son utilité d'origine (mettre une image en cliquant sur la liste déroulante)

Ok je comprends. Alors pour info si tu veux mettre du style dans une balise html ca s'écrit plutôt :
<select id="1" onchange="change();"  style="width:10px; height:10px;">

exactement comme c'est fait plus bas pour les options.

Et pour aller un peu plus loin on n'écrit pas le CSS comme ça normalement. On préfère donner une classe à l'objet html et a écrire le CSS dans un fichier spécial ou il n'y a que le CSS :
<select id="1" onchange="change();"  class="monselect">

.monselect {
    width:10px;
    height:10px;
}

Mais bon c'est pas le sujet c'est si tu veux aller un peu plus loin dans les bonnes façon de faire.

Kizars a écrit :
Ensuite tu me dit de te dire quelle fonction va être exécuté pour quel select, et bas la je pourrai pas te dire car je sais pas non plus.. Smiley sweatdrop .
Mais je pense que a la place de ton "blablabla" tu met l'id "1" pour que sa fonction soit associer au select dons l'id est &amp; et idem pour le "2" avec la fonction qui a "blobloblo". Et si c'est pas le cas bas.. je pourrai rien te dire de plus sur cette fonction désolé.

Et bien justement non. Comment ton code peut choisir une des deux fonctions sans regarder dedans ? Et oui, il ne va pas exécuter les fonctions pour savoir...

Il faut donc différencier les fonctions pour chaque appel AVANT l'intérieur de la fonction. Une première solution serait de faire ça :
<select id="1" onchange="change1();"></select>
<select id="2" onchange="change2();"></select>

 <script>
function change1() {
    var select = document.getElementById("1");
    select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage;
}
function change2() {
    var select = document.getElementById("2");
    select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage;
}
</script>

Ici tu vois bien que chaque select appelle sa propre fonction, il n'y a pas de collisions.

C'est un premiere solution pour comprendre le concept. Maintenant, on va tenter de mutualiser un peu tout ca parcequ'on a 2 fonction identiques (seul l'id change). On va pour ca avoir UNE seule fonction (pas deux fonction avec le même nom) et lui donner l'ID en paramètre :

<select id="1" onchange="change('1');"></select>
<select id="2" onchange="change('2');"></select>

 <script>
function change(id) {
    var select = document.getElementById(id);
    select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage;
}
</script>

Et voila, on a une seule fonction pour changer le background (plus facile à maintenir) et c'est l'argument qui va influer sur le l'élément a changer.

Pour aller un peu plus loin ici encore on évite également de mettre le Js diretement dans le html et on aura plutôt tendance a utiliser un event listner :

<select id="1">
  <option value="toto">test</option>
  <option value="toto">test</option>
</select>
<select id="2">
  <option value="toto">test</option>
  <option value="toto">test</option>
</select>

 <script>
document.getElementById("1").addEventListener("change", function (){ change('1'); }); 
document.getElementById("2").addEventListener("change", function (){ change('2'); });

function change(id) {
    select = document.getElementById(id);
    select.style.color = "red";
}
</script>


De cette facon c'est chacun chez soit et le code sera bein gardé Smiley lol le HTML n'a que du HTML et le Js et le CSS sont à part bien rangés !

Kizars a écrit :
J'ai pas encore eu de cours sur le javascript en classe, le brin de connaissance que j'ai sont en désordre complet... Smiley ohwell

Y'a pas de soucis on est tous la pour apprendre Smiley cligne

Si tu veux des précisions ou que ce n'est pas encore clair n'hésites pas.


Bonne aprem !
Modifié par _laurent (06 May 2021 - 14:59)
Meilleure solution
Merciiiiiiii, je suis tellement nul, que j'ai mis 40minute a trouver le moyen de faire marcher le code Smiley sweatdrop Smiley roflol Smiley fut Smiley kneu mdr..

Je te remercie bcp laurent d'avoir pris le temps de m'aidez!

Je met le sujet résolu, merci encore. Smiley lol
Modifié par Kizars (06 May 2021 - 15:42)