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按钮代码是

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

Answer 1

您必须使用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";
    }
}

Answer 2

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

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

innerHTML也可以，可以用来插入HTML。

Answer 3

我知道这个问题已得到解答，但我也看到还有另一种方法，我想覆盖它。有多种方法可以实现这一目标。

1- innerHTML

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

您可以在此处插入HTML。但这种方法的缺点是，它具有跨站点安全攻击。因此，为了安全起见，最好避免这种情况。

2- innerText

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

这也将取得成果，但由于需要一些布局系统信息，因此其性能会下降。与innerHTML不同，您无法使用此插入HTML标记。 Check Performance Here

3- textContent

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

这也将实现相同的结果，但它没有像innerHTML这样的安全问题，因为它不像innerText那样解析HTML。此外，由于性能提高，它也很轻。

因此，如果必须像上面那样添加文本，那么最好使用textContent。

Answer 4

另一个解决方案是在if else语句中使用jquery按钮选择器$（＆＃34;＃buttonId＆＃34;）。text（＆＃34;你的文字＆＃34;）;

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 5

您可以像这样切换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;    
}

如何使用javascript更改按钮文本

5 个答案: