Changer une image en cliquant dessus!

Bonsoir,

Pour commencer ne fais pas :

image.setAttribute("src","caillera.jpg")

Mais utilise directement :

image.src = 'caillera.jpg'

Ensuite là où je pense est le problème principale :

x=Math.floor((Math.random())*10);

Tu multiplies par 10, donc cela peut ressortir un nombre entre 0 et 10, donc parfois tu peux avoir 9, hors ici tu ne test que 0, 1, 2 !

Pour avoir un nombre compris entre 0 et 2 ce serait plutôt multiplié par 3 (le nombre de valeur possible en partant de 0 ici)

x=Math.floor((Math.random())*3);

Pour finir tu créer un élément img que tu injectes dans un autre élément qui est déjà en img, je ne dis pas que cela ne fonctionne pas (pas testé) mais c'est afreux !

Si tu as besoin de recréer une image de toute pièce, alors injecte là dans un conteneur mais là le mieux est de changé le src directement !

Pour finir dans les détails mais qui ont leur importance :

if(x==0) {
		image.setAttribute("src","caillera.jpg")
	}

	if(x==1) {
		image.setAttribute("src","PatrickBruel.jpg")
	}

	if(x==2) {
		image.setAttribute("src","Gainsbourg.jpg")
	}

Là tu test 3 conditions, même si la première est trouvé, ton JS va quand même tester les autres, alors qu'on a pas besoin ! Préconise les else if pour les choses similaires :

if(x==0) {
		image.setAttribute("src","caillera.jpg")
	}

	else if(x==1) {
		image.setAttribute("src","PatrickBruel.jpg")
	}

	else if(x==2) {
		image.setAttribute("src","Gainsbourg.jpg")
	}

Voici un code final qui devrait se rapprocher davantage de ce que tu recherches :

function photorandom(y) {

// Pas besoin à priori de recréer une image, ce sera le cas si tu dois attacher des évènements complexes dessus, ici ce n'est pas le cas puisque tu utilises onclick directement dans le html

// On met à x 3 pour avoir un nombre compris entre 0 et 2
	x=Math.floor((Math.random())*3);
	
// On test les différentes occurence et on met le chemin directement dans une variable
	if(x==0) {
		var srcImage = 'caillera.jpg' ; 
	}
	else if(x==1) {
		var srcImage = 'PatrickBruel.jpg'
	}

	else if(x==2) {
		var srcImage = 'Gainsbourg.jpg'
	}

// Il faut toujours tester le cas où il n'y à rien au cas où ça évite de ne rien avoir dans la console
// Typeof test le type, si il est différent de undefined, ok
if(typeof(srcImage) != 'undefined'){

// On va récupérer 
        photo = document.getElementsByTagName("img")
	photo[y-1].src = srcImage ; 

}else{
 console.log('Mince, il doit y avoir une erreur quelque part...') ; 
}

}

Je n'ai pas testé, à toi de faire le nécessaire pour que cela fonctionne correctement

A et n'oubli pas que x, y en nom de variable c'est moche, tu vas vite te perdre.

Tu as une bonne logique, il faut juste compléter les bases. J'espère que tout ceci pourra t'aider à progresser !

Très bonne soirée à toi
Modifié par kevinlourenco (04 Mar 2017 - 05:00)

Salut,

@kevinlourenco a vraiment très bien répondu à ton problème.
Je vais juste proposer des pistes pour le coder différemment :

<img src="fond.png" class="img-update" >
<img src="fond.png" class="img-update" >

 
let tabPicture = [
	'caillera.jpg',
	'PatrickBruel.jpg',
	'Gainsbourg.jpg',
	/* ... */
]

/*
 * photorandom 
 * Retourne une valeur aléatoire 
 * @param {array} tab : tableau
 * @return {string}
*/
let photorandom = (tab) => {
	let response = null
	// Si tab existe et est de type object [objet et array]
	if(tab & typeof tab === 'object'){
		// On récupére la longeur du tableau
		let l = tab.length - 1
		// Nombre aléatoire entre une valeur min (incluse) et max (exclue)
		// Cf cet excellent site :  https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/random
 
		let x = Math.random() * (l - 0)
		// Si la valeur existe, on l'affecte à response
		response = (tab[x]) ? tab[x] : null
	}
	return response
}

// On récupére tous les elements de type image ayant la classe .img-update et on boucle dessus
let img = []slice.call(document.querySelectorAll('img.img-update')).forEch((img) => {
	// On ajoute un évenement click
	img.addEventListener('click', (e) => {
		// On récupére l'image sur laquelle le user vient de cliquer
                // Un excellent article :  https://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html
 
		let target = e.currentTarget
		// On récupére une image
		let src = photorandom(tabPicture)
		// On modifie l'image si src n'est pas null
		(src) ? target.src = src : console.warn('Aucune image')
	}, false)

Voila ce code devrait marcher. Je l'ai pas testé.
En passant par un tableau qui contient toutes tes images, tu ne t’embêteras pas à coder une condition pour chaque image :
Avec 10000 et ensuite

Il y a plein de piste d'amélioration :
- Ajouter des effets
- Ajouter une écouteur pour attendre la fin du chargement de l'image avant de l'insérer
- Ajouter un cache
- ...

++++

Si l'auteur souhaite utiliser la version de renards sans setup un Babel voici l'équivalent en ES5 :

var tabPicture = [
	'caillera.jpg',
	'PatrickBruel.jpg',
	'Gainsbourg.jpg',
	/* ... */
];
var tabLen = tabPicture.length - 1;

/*
 * photorandom 
 * Retourne une valeur aléatoire
 * @return {string}
*/
function photorandom() {
	return tabPicture[Math.ceil(Math.random() * (tabLen - 0))];
}

document.querySelectorAll('img').forEach(function(img) { 
	img.addEventListener('click', function(e) {
		 e.currentTarget.src = photorandom();
	}, false) 
});

Bonne journée
Modifié par John Wayne (06 Mar 2017 - 11:57)