Changer la source d'une image sur onclick

**mnssylvain** · 13/07/2022, 10h44

Bonjour à tous,

Pour commencer je dois vous dire que je suis débutant en JS.
Je cherche à faire un système d'humeur pour les membres d'un site.
Je souhaite donc pouvoir changer la source d'une image qui représente "l'humeur du jour" en cliquant dessus.
chaque click doit faire passer à l'image suivante. j'en ai 5.

Pour le moment je me bats pour changer d'image. Mais il faudra ensuite que j'enregistre l'humeur du jour' dans une base de donnée sous la forme d'une valeur de 1 à 5.

Voila le script que j'ai pondu en recherchant différentes solution sur le net.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script>
 
// gère le changement d'image
var p = document.getElementById('humeur')
p.onclick = changeimage;  //=> ici j'ai l'erreur suivante dans la console: Uncaught TypeError: Cannot set properties of null (setting 'onclick')
 
 
function changeimage() {
 
	// affichage de la valeur pour débug => ne fonctionne pas
	var source =p.attr('src');
	console.log(source);
	console.log('avant coeur');
		switch (source){
 
		case 'images/coeurs1.png':
			p.attr('src') = 'images/coeurs2.png';
			console.log("coeurs1");
			break;
		case 'images/coeurs2.png':
			p.attr('src') = 'images/coeurs3.png';
			console.log("coeurs2");
			break;
		case 'images/coeurs3.png':
			p.attr('src') = 'images/coeurs4.png';
			console.log("coeurs3");
			break;
		case 'images/coeurs4.png':
			p.attr('src') = 'images/coeurs5.png';
			console.log("coeurs4");
			break;
		case 'images/coeurs5.png':
		break;
			p.attr('src') = 'images/coeurs1.png';
			console.log("coeurs5");
 
		default:
			console.log('defaut');
 
		}
	}
 
 
</script>

et le code html sur lequel je souhaite que ça joue...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
         <div class="row text-right">
            	 <!--Affichage humeur-->
                	<div class="col-12" >
                    	<form method="POST" onsubmit="return sendData();">
                        <input name="idclients" type="hidden" value=$clients['IDClient']>
                		<p align="right"> <input id='humeur' name="humeur" type="image" src="images/coeurs<? echo $clients['Humeur']?>.png" alt="" width="160" height"120" /></p> 
                        <input type="submit" name="submit_humeur" value="changer"> 
                        </form>       
 
                </div>
                </br>
             </div>

J'utilise aussi bootstrap.. je sais pas si ça peut provoquer un conflit???

Les problèmes que je rencontre:
- Je n'arrive pas à avoir de retour de débogage de mon code.... J'ai essayé avec console.log() que l'on retrouve dans mon code mais je ne vois pas dans la console où la valeur doit apparaitre (oui je suis très débutant en JS...)
- le code ne fonctionne pas.....

Je remercie déjà d'avance tout ceux qui prendront le temps de lire ce post !

**NoSmoking** · 13/07/2022, 11h06

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
// gère le changement d'image
var p = document.getElementById('humeur')
p.onclick = changeimage;  //=> ici j'ai l'erreur suivante dans la console: Uncaught TypeError: Cannot set properties of null (setting 'onclick')

ceci veux dire que ton script est appelé avant que ton élément soit dans le DOM, essaie en mettant ton script en fin de page.

**mnssylvain** · 16/07/2022, 14h38

Bonjour

Merci beaucoup pour cette réponse.
Effectivement en remettant les choses dans l'ordre je n'ai plus l'erreur.
Mais ça ne fonctionne pas pour autant !

Je n'arrive toujours pas à avoir d'information de débogage. J'essaie avec ces deux lignes d'avoir un retour pour voir si le code est bien lu....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	console.log(source);
	console.log('avant coeur');

Mais je n'ai aucune info qui apparait...
Est-ce bien comme cela qu'il faut faire.

Est ce que le code que j'ai fait comporte d'autres erreurs à vos yeux ? LA logique est-elle bonne ?

Merci pour votre aide

**ProgElecT** · 17/07/2022, 09h33

Salut

Que donnerait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// gère le changement d'image
var p = document.getElementById('humeur');
p.addEventListener("click", changeimage);
 
function changeimage() {
	console.log(source);
	console.log('avant coeur');
}

Motif de l'édition:
J'ai été un peu vite lors du collé du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// gère le changement d'image
var p = document.getElementById('humeur');
p.addEventListener("click", changeimage);
 
function changeimage(e) {
	console.log(e.target.attributes.src.textContent);
	console.log('avant coeur');
}

**mnssylvain** · 17/07/2022, 14h38

Bonjour

Merci beaucoup effectivement maintenant ça fonctionne.
J'aimerai bien apprendre de mes erreurs. Pouvez-vous m'expliquer:

1) Quelle est la différence entre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

p.onclick = changeimage;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

p.addEventListener("click", changeimage);

2) à quoi sert le "e" vu qu'on ne passe pas de paramètres ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function changeimage(e) {

Maintenant je vais m'attaquer à l'enregistrement de cette donnée dans la Base de données......
J'ai compris qu'il fallait que j'utilise Ajax pour ça afin que lorsque l'utilisateur click sur l'image, ça change l'image (ça c'est fait) et que ça enregistre une valeur numérique dans la base de 1 à 5 en fonction de l'image sans recharger toute la page.....
Allez, je m'y mets....

Merci encore pour m'avoir débloqué !