[解決済み] 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()" />

解決方法は？

もし HTMLElement は input[type='button'] , input[type='submit'] など。

<input id="ShowButton" type="button" value="Show">
<input id="ShowButton" type="submit" value="Show">

をこのコードで変更します。

document.querySelector('#ShowButton').value = 'Hide';

もし HTMLElement は button[type='button'] , button[type='submit'] など。

<button id="ShowButton" type="button">Show</button>
<button id="ShowButton" type="submit">Show</button>

のいずれかを使用して変更します。

document.querySelector('#ShowButton').innerHTML = 'Hide';
document.querySelector('#ShowButton').innerText = 'Hide';
document.querySelector('#ShowButton').textContent = 'Hide';

ご注意ください

• input は 空タグ と を持つことはできません。 innerHTML , innerText または textContent
• button は コンテナタグ と を持つことができます。 innerHTML , innerText または textContent

asp.net-web-forms、asp.net-ajax、rad-gridを使用していない場合は、この回答を無視してください。

を使用する必要があります。 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";
    }
}