Afficher un contenu différent en fonction du boutton cliqué

Bonjour
J'ai 3 bouton et j'aimerais afficher des contenus différents en fonction du bouton cliqué. Mais ça marche pas. Pouvez-vous m'aider ? Merci

<button id="prelevementCB">
<img src="http://lorempixel.com/200/200/cats/3" alt="Par prélèvement bancaire " >
</button>

<button id="carteBancaire">
<img src="http://lorempixel.com/200/200/cats/4" alt="Carte bancaire" />
</button>

<button id="comptant">
<img src="http://lorempixel.com/200/200/cats/4" alt="Comptant" />
</button>

{# {% endif %} #}
<script>
var valeur;
if (document.getElementById('prelevementCB').checked) {
 valeur = document.getElementById('prelevementCB').value;
 document.write(valeur);
 document.write('<div>Choisissez votre mode de paiement</div>');
}
</script>

Salut !

Il y a plusieurs problèmes dans ton code déjà :
- ".checked" ne marche que sur les checkbox (donc pas sur tes <buttons>)
- tu appelles ".value" sur un élément qui n'a pas d'attribut value (lors de l'assignation à ta variable valeur)

Voila un petit script qui marche (donc qui affiche le mode de paiement choisit par l'utilisateur, si c'est bien ça que tu veux) ->

HTML :

<div id="btn-wrapper">
	<button id="prelevementCB">
		<img src="https://picsum.photos/200/200" alt="Par prélèvement bancaire"/>
	</button>

	<button id="carteBancaire">
		<img src="https://picsum.photos/200/200" alt="Carte bancaire"/>
	</button>

	<button id="comptant">
		<img src="https://picsum.photos/200/200" alt="Comptant"/>
	</button>
</div>
<div id="result">
	Aucun moyen de paiement choisit
</div>

Javascript, à mettre dans une balise <script></script>

// Au clique sur le parent, je lance une fonction
document.getElementById('btn-wrapper').onclick = event => {

	// Si l'utilisateur a bien cliqué sur une image
	if (event.target.nodeName === 'IMG') {

		// J'écris la valeur alt de l'image dans la div #result
		document.getElementById('result').innerText = event.target.alt;
	}
}

// Tu peux aussi l'écrire comme ceci 
document.getElementById('btn-wrapper').addEventListener('click', function (event) {
	if (event.target.nodeName === 'IMG') {
		document.getElementById('result').innerText = event.target.alt;
	}
});

Modifié par Wazazaby (25 Apr 2020 - 14:51)