<h1>Titre en <span id="couleur"> couleur </span></h1>
<button type="button" id="bouton_bleu">bleu</button>
<button type="button" id="bouton_vert">vert</button>
body{
  background-color: #EEF5F5;
  text-align: center;
}
let boutonBleu = document.querySelector("#bouton_bleu");
boutonBleu.addEventListener("click", enBleu)
let boutonVert = document.querySelector("#bouton_vert");
boutonVert.addEventListener("click", enVert)
let titre = document.querySelector("h1");
let couleur = document.querySelector("#couleur");
function enBleu() {
  titre.style.color = "RoyalBlue";
  couleur.textContent = "bleu"
}
function enVert() {
  titre.style.color = "teal";
  couleur.textContent = "vert"
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.