web-dev-qa-db-ja.com

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

私は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ボタンコードは

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

代わりにvalueを使用する必要があります innerHTML。

これを試して。

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

また、serverでボタンを実行しているため、フレームワーク内でIDが破損する可能性があります。だから、やってみて

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

これを行う別のより良い方法は、このようなものです。

マークアップで、onclickをこのように変更します。 onclick="showFilterItem(this)"

次のように使用します

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

innerTextは、これに対する現在の正しい答えです。他の答えは時代遅れであり、間違っています。

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

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

47
Maitreya

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

1- innerHTML

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

これにHTMLを挿入できます。しかし、この方法の欠点は、クロスサイトセキュリティ攻撃があることです。したがって、テキストを追加する場合は、セキュリティ上の理由からこれを回避する方が適切です。

2- innerText

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

これも結果を達成しますが、フードの下では重いレイアウトシステム情報が必要であるため、パフォーマンスが低下します。 innerHTMLとは異なり、これでHTMLタグを挿入することはできません。 ここでパフォーマンスを確認

- textContent

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

これでも同じ結果が得られますが、innerTextのようなHTMLを解析しないため、innerHTMLのようなセキュリティの問題はありません。また、パフォーマンスが向上するため、軽量です。

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

17
HebleV

別の解決策は、if elseステートメント内でjqueryボタンセレクターを使用することです$（ "＃buttonId"）。text（ "your text"）;

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");
}}
3
Jakub H.

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

filterstatus ^= 1;

あなたの関数は次のようになります

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;    
}
0
Q07