11480 sujets

JavaScript, DOM et API Web HTML5

bonjour

apres pas mal de bidouille je viens de faire ce script dont l'objectif est de recuperer l'url d'une image, oter un bout de cette url pour appeler une autre image, et au clique suivant remrettre la 1ere


   function change(a) {
    var e=document.querySelector(".img");
//je cherche si "mot" est contenue dans l'url de l'image
	if (e.src.indexOf("mot")!=-1){
//s'il l'est je le vire
	 e.src= a.src.replace("repertoire/mot","repertoire/");
	}
	else{
//s'il ne l'est pas ou plus je le remet
e.src= a.src.replace("repertoire/","repertoire/mot");	
	}
	}

<img class="img" src="../repertoire/motautremot.gif" onclick="change(this);">


ca marche tres bien qd je l'appelle comme ci dessus (peut etre peut on faire mieux suis pas specialiste
par contre je voudrais que le onclick fonctionne quand il n'est pas sur l image comme ci dessous (et du coup ca ne fonctionne pas)

<div><img class="img" src="../repertoire/motautremot.gif">
<p onclick="change(this);" class="bouton" title="Cliquez"></p></div>


merci
Modifié par nantais (17 Feb 2021 - 18:22)
Modérateur
Salut,

plusieurs erreurs dans ton code mais ca ne vient pas du this. Regarde ta console les erreurs y sont et sont bien explicite :
Uncaught TypeError: Cannot read property 'replace' of undefined


function change(a) {
    [...]
    e.src= a.src.replace("repertoire/mot","repertoire/");

Quand tu cliques sur le <p> la variable "a" représente ton <p> hors a.src ca n'existe pas donc pas possible de faire de replace.

Et sinon ton test :
if (e.src.indexOf("mot")!=-1){

est toujours true. Meme si tu remplace "repertoire/mot" dans "../repertoire/motautremot" il reste "mot" à la fin. Il faut que tu check "/mot" plutôt.

Bonne journée
Modifié par _laurent (18 Feb 2021 - 05:46)
bonjour Laurent

Merci pour ta reponse
oui pour /mot bien sur

par contre pour "Uncaught TypeError: Cannot read property 'replace' of undefined"

c'est justement l'objet de ma question ici

comment appeler depuis le <p>ma fonction, qui fonctionne bien qd je l'appelle depuis l'image

merci
Modérateur
Oui et je t'ai donné la réponse, ou du moins la piste..
function change(a) {
    [...]
    e.src= a.src.replace("repertoire/mot","repertoire/");

_laurent a écrit :
Quand tu cliques sur le <p> la variable "a" représente ton <p> hors a.src ca n'existe pas donc pas possible de faire de replace.


Dans :
<div><img class="img" src="../repertoire/motautremot.gif">
<p onclick="change(this);" class="bouton" title="Cliquez"></p></div>

Tu veux vraiment récupérer le src de ton <p>(a) alors qu'il n'existe pas ? ou celui de ton image (e) ? Il faut faire e.src et pas a.src pour écupérer le path avant le replace

Et sinon le this ne sert à rien ici... Le <p> sert juste au click et une fois dans le click tu cherche l'image et tu remplace son src... tu n'as rien a faire avec le p

Ou alors ton code n'est pas complet et ce que tu cherche a faire n'est pas clair
Modifié par _laurent (18 Feb 2021 - 15:43)
Modérateur
Si jamais tu as un code un peu plus complet de ce que tu veux faire et que tu bute n'hésite pas surtout hein Smiley smile

Bon courage