web-dev-qa-db-ja.com

JavaScriptでボタンテキストまたはリンクテキストを変更する方法

この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'、しかし何も機能しません。

値ではなくボタンテキストまたはリンクテキストにアクセスして変更するにはどうすればよいですか

javascripthtmlbutton
34
tempy

変化する .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";
}
57
I Hate Lazy
document.getElementById(button_id).innerHTML = 'Lock';
19
elclanrs

次を使用できます。

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

HTML形式を使用する場合は、代わりにinnerHTMLプロパティを使用します。

4
Callum McLean

引用を削除します。テキストの代わりに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";
   }
}
0
Anoop