43

我有这个 HTML 按钮：

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

这是我的toggleTextJavaScript 函数：

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

据我所知，按钮文本 ( <button id="myButton">Lock</button>) 就像任何链接文本
( <a href="#">Lock</a>)。因此，它是一个按钮这一事实并不重要。但是，我无法访问按钮文本并对其进行更改。

我试过('button_id'), (button_id), == "Lock", == 'Lock', 但没有任何效果。

如何访问和更改按钮文本（不是值）或链接文本？

4

4 回答 4

67

更改.text为.textContent获取/设置文本内容。

或者由于您正在处理单个文本节点，.firstChild.data请以相同的方式使用。

另外，让我们合理地使用变量，通过缓存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";
   }
}

或者像这样更紧凑：

function toggleText(button_id)  {
   var text = document.getElementById(button_id).firstChild;
   text.data = text.data == "Lock" ? "Unlock" : "Lock";
}
于 2012-10-01T19:36:23.480 回答
28 
document.getElementById(button_id).innerHTML = 'Lock';
于 2012-10-01T19:35:28.140 回答
5

您可以简单地使用：

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

如果要使用 HTML 格式，请改用该innerHTML属性。

于 2012-10-01T19:40:39.187 回答
0

删除报价。并使用 innerText 而不是 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";
   }
}
于 2012-10-01T19:37:26.253 回答