Besoin d'aide pour coder en javascripte plusieur changement de photos Fermé

Question

Bonjour,
Je suis une élève de première générale et je dois réaliser un projet. Cependant j'éprouve des difficultés dans la programmation. Et avec le coronavirus pas facile de pouvoir communiquer avec mon professeur.  Mon objectif est de créer un jeu ludique.  Alors j'ai créer un système où je pose une question et selon la réponse on clique sur une image soit un coffre vide apparaît soit une autre image "une lettre". Cependant je ne sais pas comment cumuler les variables. Une variable pour modifer une photo est:
var images = ['chest_closed.png','chest_open.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);

Et je l'ai introduite par:
function change_image(){
/*change l'image*/
let de = Math.floor(Math.random() * images.length) ;
img.setAttribute('src',images[de]);
}

J'ai appliquée des variables de mon cours.
Merci à l'avance pour votre aide.
EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code 

Merci d'y penser dans tes prochains messages.

jordane45 · Answer

Bonjour

Que veux-tu dire par cumuler des variables ?

Peux-tu décrire le plus précisément possible sur quoi tu bloques...

eleve91 · Answer

Mon objectif est que l'enfant jouant à ce jeux. Clique sur le coffre qui a la bonne réponse. Imaginons qu'il clique sur le coffre de droite, qui est la mauvaise réponse. Alors je souhaiterait que l'image se modifie en coffre ouvert.Jusque ici je réussissais a faire. Mais lorsque je souhaite exercer cette action: double click sur une image et remplace l'image précédente par une autre. Je n'y parviens pas. Au total 8 coffres fermer sont disposer donc 2 par question. Au total pour programmer mes images j'ai coder en javascript:

function change_image(){
  let de = Math.floor(Math.random() * images.length) ;
  img.setAttribute('src',images[de]); 
}

{
var images = ['chest_closed.png','chest_open.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed1.png','f.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed2.png','chest_open1.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed3.png','i.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed4.png','chest_open2.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed5.png','n.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed6.png','i2.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

{
var images = ['chest_closed7.png','chest_open3.png'];
var img = document.querySelector('.image');
img.addEventListener('dblclick', change_image);
}

 EDIT : Ajout des balises de code 
Avec toute ces variables à la suite aucun coffre s'ouvre je suppose qu'il existe ou fonction ou je ne sais pas mais quelque chose qui les relis pour que tout cela puisse s'ouvrir.
Excusez moi si je manque de clarté.

jordane45 · Answer

Déjà, lorsque tu postes du code sur le forum,  tu dois utiliser les balises de code.
Explications ( à lire ENTIEREMENT !! ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite,
ben.. tu "écrases" ta variable img  et ta variable images à chaque fois

var images = ...
var img = document.querySelector('.image');

En plus, tu cibles tous les éléments html qui ont la class image ...   tu ne cibles jamais une image en particulier...

pour le reste.. je n'ai rien compris à ce que tu cherches à faire...
surtout.. que vient faire du random ( ta fonction change_image ) ici...

Tu veux switcher entre les deux images ?
Comment peux tu identifier chaque image ? tu leur as attribué un ID ? 
Je pense que nous partager le code complet  serait déjà un bon début.
Si tu peux également nous faire un "dessin" de ce que tu as avant le double click et ce que tu souhaites avoir après le double click serait pas mal...

Besoin d'aide pour coder en javascripte plusieur changement de photos

3 réponses

EDIT : Ajout des balises de code

Discussions similaires