javascriptを使用してボタンのテキストを変更する方法

Question

JavaScriptのコードでボタンのテキストを設定する次のコードがありますが、同じテキストが変わらないようにしています。

function showFilterItem() { 
    if (filterstatus == 0) { 
     filterstatus = 1; 
     $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem(); 
     document.getElementById("ShowButton").innerHTML = "Hide Filter"; 
    } 
    else { 
     filterstatus = 0; 
     $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem(); 
     document.getElementById("ShowButton").innerHTML = "Show filter"; 
    } 
} 

そして、私のHTMLボタンコードは、あなたが代わりに innerHTML のvalueを使用する必要があります

<input class="button black" id="ShowButton" type="button" runat="server" value="Show Filter" onclick="showFilterItem()" /> 

Answer 1

です。

これを試してください。

document.getElementById("ShowButton").value= "Hide Filter"; 

serverでボタンを実行しているため、IDがフレームワークに表示されることがあります。そう、試してみてください。

document.getElementById('<%=ShowButton.ClientID %>').value= "Hide Filter"; 

これを行うにはもう1つの方法があります。

マークアップで、このようにあなたのonclickを変更してください。今onclick="showFilterItem(this)"

あなたは

function showFilterItem(objButton) { 
if (filterstatus == 0) { 
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem(); 
    objButton.value = "Hide Filter"; 
} 
else { 
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem(); 
    objButton.value = "Show filter"; 
} 
    filterstatus ^= 1;  
} 

Answer 2

のようにそれを使用しますif else文の中のセレクタ$（ "＃buttoテキスト）（ "あなたのテキスト"）;

function showFilterItem() { 
if (filterstatus == 0) { 
    filterstatus = 1; 
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem(); 
    $("#ShowButton").text("Hide Filter"); 
} 
else { 
    filterstatus = 0; 
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem(); 
    $("#ShowButton").text("Show Filter"); 
}} 

Answer 3

別の解決策は、jqueryのボタンを使用している可能性のようなだからあなたの関数が見えます。この

filterstatus ^= 1; 

ようfilterstatus値を切り替えることができ、この

function showFilterItem(objButton) { 
    if (filterstatus == 0) { 
     filterstatus = 1; 
     $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem(); 
     objButton.value = "Hide Filter"; 
    } 
    else { 
     filterstatus = 0; 
     $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem(); 
     objButton.value = "Show filter"; 
    } 
} 

Answer 4

innerTextはこれに関する正しい正解です。他の回答は古く、間違っています。

document.getElementById('ShowButton').innerText = 'Show filter'; 

innerHTMLも動作し、HTMLの挿入に使用できます。

Answer 5

私はこの質問が回答されていることを知っていますが、私はまた、私がそれをカバーしたい別の方法がないことがわかります。これを達成するための複数の方法があります。

の1- innerHTMLの

document.getElementById("ShowButton").innerHTML = 'Show Filter'; 

あなたはこのにHTMLを挿入することができます。しかし、この方法の欠点は、クロスサイトセキュリティ攻撃です。テキストを追加するには、セキュリティ上の理由からこれを避ける方がよいでしょう。

2-それ性能が低下によるれる、いくつかのレイアウトシステム情報を必要とする。これはまた、結果が、フードの下にその重を達成する

document.getElementById("ShowButton").innerText = 'Show Filter'; 

のinnerText。 innerHTMLとは異なり、これでHTMLタグを挿入することはできません。 Check Performance Here

、3-のTextContent

document.getElementById("ShowButton").textContent = 'Show Filter'; 

これも同じ結果を達成するが、それはのinnerTextのようなHTMLを解析していないとして、それはinnerHTMLのようなセキュリティ上の問題を持っていません。また、性能が向上しているために軽いです。

上記のようにテキストを追加する必要がある場合は、textContentを使用する方がよいでしょう。