JavaScript Modifier le texte du bouton

1. JavaScript Modifier le texte du bouton au chargement
2. JavaScript Modifier le texte du bouton au passage de la souris
3. JavaScript Modifier le texte du bouton au clic
4. JavaScript Modifier le texte du bouton à l’aide de jQuery

Notre objectif est d’en savoir plus sur le texte du bouton de modification JavaScript via un exemple de code. Il montre comment le texte du bouton change lors du chargement, du clic et du passage de la souris. Il illustre également l’utilisation de jQuery pour modifier le texte du bouton.

JavaScript Modifier le texte du bouton au chargement

Si vous avez un élément HTML <input> comme input[type='button'] ou input[type='submit'], vous pouvez modifier le texte du bouton de la manière suivante.

Code HTML:

<input id="btn" type="button" value="Update">
<input id="btnSubmit" type="submit" value="Update">

Code JavaScript :

document.querySelector('#btn').value = 'Remove';
document.querySelector('#btnSubmit').value = 'Remove';

Vous pouvez également modifier le texte du bouton de l’élément HTML <bouton> en utilisant l’une des méthodes données ci-dessous (les méthodes données sont .innerHTML, .innerText et .textContent).

Code HTML:

<button id="btn" type="button" value="Show Result">Show Result</button>
<button id="btnSubmit" type="submit" value="Submit Result">Submit Result</button>

Code JavaScript :

// querySelector selects the element whose id's value is btn
document.querySelector('#btn').innerHTML = 'Hide Result';
document.querySelector('#btn').innerText = 'Hide Result';
document.querySelector('#btn').textContent = 'Hide Result';

// querySelector selects the element whose id's value is btnSubmit
document.querySelector('#btnSubmit').innerHTML = 'Hide Result';
document.querySelector('#btnSubmit').innerText = 'Hide Result';
document.querySelector('#btnSubmit').textContent = 'Hide Result';

Pouvons-nous utiliser .innerHTML, .innerText et .textContent pour l’élément HTML <input> ? Non. La raison est que <input> est un élément vide tandis que <button> est une balise de conteneur et possède les propriétés .innerHTML, .innerText et .textContent.

Bien que l’objectif soit atteint en utilisant .innerHTML, .innerText et .textContent, vous devez avoir certains points à l’esprit.

1. Vous devrez peut-être faire face à des attaques de sécurité inter-sites en raison de l’utilisation de JavaScript .innerHTML.
2. JavaScript .innerText réduit les performances car il nécessite des détails sur le système de mise en page.
3. JavaScript .textContent ne pose aucun problème de sécurité comme .innerHTML. Il n’a pas non plus besoin d’analyser le contenu HTML comme .innerText, ce qui donne les meilleures performances.

Maintenant, vous connaissez les différences entre eux. Alors, choisissez l’une de ces méthodes qui convient aux exigences de votre projet. Vous pouvez en savoir plus à leur sujet ici.

JavaScript Modifier le texte du bouton au passage de la souris

Code HTML:

<button class="button">Hide Result</button>

Code CSS :

.button {
 background-color: red;
}
.button:hover {
 background-color: green;
}

Code JavaScript :

let btn = document.querySelector('.button');

btn.addEventListener('mouseover', function() {
  this.textContent = 'Show Result!';
})
btn.addEventListener('mouseout', function() {
  this.textContent = 'Hide Result';
})

Le code ci-dessus doit afficher une sortie dans laquelle le texte et la couleur du bouton changent lorsque le pointeur de la souris survole le bouton.

Le querySelector() affiche le premier élément qui correspond au sélecteur défini. Le addEventListener() attache un gestionnaire d’événements à l’élément donné et configure une méthode pour déclencher un événement particulier.

Nous utilisons les événements mouseover et mouseout, et le .textContent modifie le texte du bouton.

JavaScript Modifier le texte du bouton au clic

Code HTML:

<input onclick="changeText()" type="button" value="Hide Result" id="btn">

Code JavaScript :

function changeText() {
  let element = document.getElementById('btn');
  if (element.value == 'Hide Result')
    element.value = 'Show Result';
  else
    element.value = 'Hide Result';
}

changeText() s’exécute lorsque vous cliquez sur le bouton. Cette méthode obtient le premier élément qui correspond au sélecteur spécifié en utilisant getElementById(). Ensuite, il vérifie la valeur de l’élément et change en fonction de l’instruction if-else.

JavaScript Modifier le texte du bouton à l’aide de jQuery

Code HTML:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<button id="button" onclick="changeText()">Hide Result</button>
 </body>
</html>

Code JavaScript :

function changeText() {
  $('#button').html('Show Result');
  $('#button').css('background-color', 'green');
}

Le code ci-dessus change le texte du bouton de Masquer le résultat à Afficher le résultat lorsque vous cliquez sur le bouton, et il change également la couleur du bouton en vert.

Le .html() définit le contenu de l’élément sélectionné tandis que .css() change le background-color en vert. N’oubliez pas que .html() est utilisé pour l’élément HTML <button>.

Pour plus de détails sur ces fonctions, consultez ce lien.

Vous vous demandez peut-être comment modifier le texte à l’aide de jQuery si nous avons l’élément HTML <input> ? Le code suivant est pour vous de comprendre.

Code HTML:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<input type="button" id="btnShow" value="Show" onclick="changeText()">
 </body>
</html>

Code JavaScript :

function changeText() {
  $('#btnShow').attr('value', 'Hide');  // versions older than 1.6
  $('#btnShow').prop('value', 'Hide');  // versions newer than 1.6
  $('#btnShow').css('background-color', 'yellow');
}

Vous pouvez utiliser .attr() ou prop() (selon la version de jQuery) pour modifier le texte du bouton de l’élément HTML <input>. .attr() et .prop() ciblent tous deux l’attribut value de l’élément <input> et modifient sa valeur en fonction du deuxième paramètre.

Dans cet exemple de code, le deuxième paramètre est Hide. La méthode changeText() change également la couleur de fond en jaune à l’aide de la fonction .css().