Comment remplacer un bouton par une coche en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-08-17 12:50:10
Thèmes : javascript - remplacer - bouton
Question

Bonjour,

J'aimerai que lorsque l'on clique sur le bouton, celui-ci s'efface, et un coche apparaisse. Je sais le désactiver avec le code suivant :

<textarea class="js-text2" id="texte2" cols="80" rows="5" disabled="disabled"><?php echo $_SESSION["BalisesGR22"];?></textarea>
<!-- //Bouton copier -->
<input type="button" class="js-copytextbtn2" value="Copier la chaine" onclick="this.disabled = 'disabled'">

Merci.

Réponse

Bonjour, pour remplacer un bouton par une coche, en JavaScript, vous pourriez créer une fonction, puis utiliser la propriété Element.innerHTML. Vous aurez alors besoin des éléments suivants :

  • Insérer la feuille de style Font Awesome pour générer l'encoche en SVG.
  • Créer un conteneur <span> autour du bouton, puis lui attribuer un id.
  • Utiliser l'évènement onclick sur le bouton pour exécuter la fonction.

Exemple pour remplacer un bouton par une coche en JavaScript :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment remplacer un bouton par une coche en JavaScript ?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<textarea class="js-text2" id="texte2" cols="80" rows="5" disabled="disabled"><?php echo $_SESSION["BalisesGR22"];?></textarea>
<span id="conteneurBouton"><input type="button" class="js-copytextbtn2" value="Copier la chaine" onclick="doCoche();"></span>
<script>
function doCoche() {
document.getElementById("conteneurBouton").innerHTML = "<i class='fa-solid fa-circle-check'></i>";
}
</script>
</body>
</html>