javascript - 如何更改 JavaScript 中的按钮文本或链接文本？

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