Changer la source d'une image sur onclick
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:
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:
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 !
