Как изменить текст кнопки или текст ссылки в JavaScript?

У меня есть эта кнопка HTML:

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

И это моя функция 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";
   }
}

Насколько я знаю, текст кнопки (<button id="myButton">Lock</button>) точно так же, как любой текст ссылки (<a href="#">Lock</a>). Так что факт, что это кнопка, не имеет значения. Однако я не могу получить доступ к тексту кнопки и изменить его.

Я пробовал ('button_id'), (button_id), == "Lock", == 'Lock', но ничего не работает.

Как я могу получить доступ и изменить текст кнопки (не значение) или текст ссылки?

Ответ 1

Измените .text на .textContent, чтобы получить/установить текстовое содержимое.

Или, поскольку вы имеете дело с одним текстом node, используйте .firstChild.data таким же образом.

Кроме того, давайте разумно использовать переменную и получим некоторое сокращение кода и исключаем избыточный выбор DOM путем кэширования результата 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";
}

Ответ 2

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

Ответ 3

Вы можете просто использовать:

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

Если вы хотите использовать форматирование HTML, вместо этого используйте свойство innerHTML.

Ответ 4

Удалить цитату. и используйте innerText вместо текста

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