如何使用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按钮代码是

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

Answer 1

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

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

innerHTML也有效,可用于插入HTML.

Answer 2

你必须使用HTMLElement而不是input[type='button'].

试试这个.

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

而且,由于您正在运行input[type='submit']ID中的按钮,因此可能会在框架中受到损坏.我是这样,试试吧

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

另一种更好的方法就是这样.

在标记上,像这样更改你的onclick. HTMLElement

现在就这样使用它

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

Answer 3

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

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.