如何使用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";

并且由于您正在运行serverID上的按钮，因此可能会在框架中造成混乱。我是这样，尝试

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

innerText是当前的正确答案。其他答案已经过时且不正确。

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

innerHTML也可以使用，并且可以用于插入HTML。

我知道这个问题已经回答了，但我也想解决的还有另一种方法，有多种方法可以解决。

1- innerHTML

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

您可以在其中插入HTML。但是这种方法的缺点是，它具有跨站点安全攻击。因此，为了添加文本，出于安全原因，最好避免这种情况。

2-innerText

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

这也将实现结果，但是由于需要一些布局系统信息而使引擎负担沉重，从而导致性能下降。与innerHTML不同，您不能以此插入HTML标签。 在此处检查性能

3-textContent

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

这也将达到相同的结果，但是它不会像innerHTML这样存在安全问题，因为它不会像innerText这样解析HTML。此外，由于其性能提高，因此也很轻。

因此，如果必须如上所述添加文本，则最好使用textContent。

另一种解决方案是在if else语句$（“＃buttonId”）。text（“ your text”）;中使用jquery按钮选择器。

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");
}}

您可以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;    
}