webentwicklung-frage-antwort-db.com.de

Wie kann ich den Button-Text oder den Link-Text in JavaScript ändern?

Ich habe diese HTML-Schaltfläche:

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

Und das ist meine toggleText JavaScript-Funktion:

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

Soweit ich weiß, ist der Button-Text (<button id="myButton">Lock</button>) genau wie jeder Link-Text
(<a href="#">Lock</a>). Die Tatsache, dass es sich dabei um einen Button handelt, spielt keine Rolle. Ich kann jedoch nicht auf den Schaltflächentext zugreifen und ihn ändern.

Ich habe versucht ('button_id'), (button_id), == "Lock", == 'Lock', aber nichts funktioniert.

Wie kann ich auf einen Schaltflächentext (keinen Wert) oder einen Linktext zugreifen und ihn ändern?

javascripthtmlbutton
32
tempy

Ändern Sie .text in .textContent, um den Textinhalt abzurufen/festzulegen.

Oder verwenden Sie .firstChild.data auf dieselbe Weise, da Sie nur einen einzelnen Textknoten verwenden.

Lassen Sie uns auch eine Variable sinnvoll einsetzen, genießen Sie eine gewisse Code-Reduzierung und eliminieren Sie die redundante DOM-Auswahl durch Zwischenspeichern des Ergebnisses von 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";
   }
}

Oder noch kompakter:

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

Sie können einfach verwenden:

document.getElementById(button_id).innerText = 'Your text here';

Wenn Sie die HTML-Formatierung verwenden möchten, verwenden Sie stattdessen die Eigenschaft innerHTML.

4
Callum McLean

Angebot entfernen und verwende innerText anstelle von text

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