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

eleve91 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   - 23 janv. 2021 à 23:32
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.
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Bonjour

Que veux-tu dire par cumuler des variables ?

Peux-tu décrire le plus précisément possible sur quoi tu bloques...

0
Réponse 2 / 3
eleve91 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
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é.
0
Réponse 3 / 3
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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...

0