IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Changer la source d'une image sur onclick


Sujet :

JavaScript

  1. #1
    Membre éclairé

    Homme Profil pro
    Enseignant
    Inscrit en
    Août 2006
    Messages
    599
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Août 2006
    Messages : 599
    Par défaut 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 : 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 !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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.

  3. #3
    Membre éclairé

    Homme Profil pro
    Enseignant
    Inscrit en
    Août 2006
    Messages
    599
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Août 2006
    Messages : 599
    Par défaut
    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

  4. #4
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 127
    Par défaut
    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');
    }
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  5. #5
    Membre éclairé

    Homme Profil pro
    Enseignant
    Inscrit en
    Août 2006
    Messages
    599
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Août 2006
    Messages : 599
    Par défaut
    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é !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    J'aimerai bien apprendre de mes erreurs. Pouvez-vous m'expliquer:
    dans ce cas je te propose de lire :

    tu vas avoir toutes les réponses à tes questions et plus

  7. #7
    Membre éclairé

    Homme Profil pro
    Enseignant
    Inscrit en
    Août 2006
    Messages
    599
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Août 2006
    Messages : 599
    Par défaut
    OK merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Changer la source d'une image
    Par moimp dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 18/05/2017, 11h02
  2. Trouver la source d'une image sur une page web
    Par will97 dans le forum Réseau/Web
    Réponses: 2
    Dernier message: 02/03/2009, 04h38
  3. Changer la source d'une image dans un panel
    Par Thomus38 dans le forum AWT/Swing
    Réponses: 6
    Dernier message: 12/12/2007, 21h31
  4. changer la source d'une image avec Firefox
    Par couetbis dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 07/11/2007, 22h45
  5. Changer la source d'une image
    Par maitrebn dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 20/07/2007, 10h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo