web-dev-qa-db-fra.com

Comment changer le texte du bouton ou du texte du lien en JavaScript?

J'ai ce bouton HTML:

<button id="myButton" onClick="lock(); toggleText(this.id);">Lock</button>

Et voici ma fonction JavaScript toggleText:

function toggleText(button_id) 
{
   if (document.getElementById('button_id').text == "Lock") 
   {
       document.getElementById('button_id').text = "Unlock";
   }
   else 
   {
     document.getElementById('button_id').text = "Lock";
   }
}

Autant que je sache, le texte du bouton (<button id="myButton">Lock</button>) est comme n'importe quel texte de lien.
(<a href="#">Lock</a>). Donc, le fait que ce soit un bouton n'a pas d'importance. Cependant, je ne peux pas accéder au texte du bouton et le changer.

J'ai essayé ('button_id'), (button_id), == "Lock", == 'Lock', mais rien ne fonctionne.

Comment puis-je accéder et modifier un texte de bouton (pas de valeur) ou un texte de lien?

javascripthtmlbutton
32
tempy

Changez .text en .textContent pour obtenir/définir le contenu du texte.

Ou puisque vous avez affaire à un seul nœud de texte, utilisez .firstChild.data de la même manière.

Aussi, utilisons judicieusement une variable, profitons de la réduction de code et éliminons la sélection redondante du DOM en mettant en cache le résultat de getElementById.

function toggleText(button_id) 
{
   var el = document.getElementById(button_id);
   if (el.firstChild.data == "Lock") 
   {
       el.firstChild.data = "Unlock";
   }
   else 
   {
     el.firstChild.data = "Lock";
   }
}

Ou encore plus compact comme ça:

function toggleText(button_id)  {
   var text = document.getElementById(button_id).firstChild;
   text.data = text.data == "Lock" ? "Unlock" : "Lock";
}
56
I Hate Lazy
document.getElementById(button_id).innerHTML = 'Lock';
16
elclanrs

Supprimer la citation. et utiliser innerText au lieu de texte

function toggleText(button_id) 
{                      //-----\/ 'button_id' - > button_id
   if (document.getElementById(button_id).innerText == "Lock") 
   {
       document.getElementById(button_id).innerText = "Unlock";
   }
   else 
   {
     document.getElementById(button_id).innerText = "Lock";
   }
}
0
Anoop