5546 sujets

Sémantique web et HTML

Modifier la couleur d'un texte en cliquant sur un bouton

Bonjour,

Je suis débutant en HTML et j'ai créé un début de site où je commente des poèmes connus.
Or, j'ai créé des boutons afin de faire le commentaire de ces poèmes (par exemple bouton "champs lexical de l'amour", pour faire très basique), et je voulais qu'en cliquant sur le bouton "champs lexical de l'amour", cela change la couleur de certains passages de mon texte qui entrent dans ce champs lexical de l'amour.

Quelqu'un aurait la solution ?

Merci d'avance !
Salut,

Tu as plusieurs façon de procéder, je te propose un technique simple comme ceci:
https://codepen.io/exemple/pen/XWjKJzM

Le code ici si tu préfère:

<!DOCTYPE html>
<html>

	<head>

		<script>

			// fonction appelée par le bouton
			const changeColor = function () {

				// ici on va chercher tous les éléments à modifier
				const elementsToChange = document.getElementsByClassName('toRed');

				// on boucle sur les éléments
				for ( let i = 0; i < elementsToChange.length; i++ ) {

					// à chaque élément on applique une nouvelle class = red
					elementsToChange[i].classList.add('red');

				}

			};

		</script>

		<style>

			.red { color: red; }

		</style>

	</head>

	<body>

	<p>Bonjour voici un <span class="toRed">texte</span> ou certains éléments vont passer <span class="toRed">en couleur rouge</span> quand vous aleez cliquer sur le bouton</p>
	<button onclick="changeColor();">Changer la couleur</button>
	
	</body>

</html>
Meilleure solution
J'avoue être un véritable véritable débutant... j'ai donc assez de mal à comprendre tout ceci...
Dans ma page html, je n'ai pas de texte à proprement parlé, mais une ligne de code qui relie mon texte HTML à une page XML, et c'est sur cette page XML qu'il y a notre texte que je souhaite modifier par des boutons...
Je m'excuse d'avoir pris de ton temps, j'ai trouvé la solution via un de mes contacts.
Encore pardon.
Bonjour,
J'ai essayé votre idée, c'est intéressant mais je pensais que ça changerait de couleur de manière graduelle, comment faire pour que cela fonctionne ? je veux dire, est-ce qu'il y a moyen de changer la couleur du texte graduellement, de gauche à droite par exemple ?
Sujet clos
Aller à