Question

我有这个HTML按钮：

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

这是我的toggleText JavaScript函数：

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'，但没有任何效果。

如何访问和更改按钮文字（非值）或链接文字？

Answer 1

将.text更改为.textContent以获取/设置文字内容。

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

此外，让我们合理使用变量，并通过缓存getElementById的结果来享受一些代码减少并消除冗余的DOM选择。

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";
}

Answer 2

document.getElementById(button_id).innerHTML = 'Lock';

Answer 3

您可以简单地使用：

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

如果您想使用HTML格式，请改用innerHTML属性。

Answer 4

删除报价。并使用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";
   }
}

如何在JavaScript中更改按钮文本或链接文本？

4 个答案: