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、同じ方法で使用します。

また、変数を賢明に使用して、コードの削減を楽しみ、 の結果をキャッシュすることで冗長な 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";
}
于 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を使用します

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 に答える