如何使用javascript更改按钮文本答案

【问题标题】：How to change the buttons text using javascript如何使用javascript更改按钮文本
【发布时间】：2011-10-25 12:53:22
【问题描述】：

我有以下代码通过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()" />

【问题讨论】：

Changing button text and not value using JavaScript

标签： javascript html button

【解决方案1】：

如果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 是 empty tag 并且不能拥有 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";
    }
}

【讨论】：

正在寻找这个：document.getElementById("ShowButton").value="Hide Filter";谢谢！
这个答案已经过时，现在不正确，应该删除它。
@Maitreya OP 使用的是<input type="button">，所以element.value 是更改按钮显示文本的正确方法。 innerText、innerHTML 和 textContent 如果您使用的是 <button></button>，则将被使用，因为它有一个开始和结束标签。
这个答案很有帮助！我找了好久document.querySelector('#ShowButton').value = 'Hide';....

【解决方案2】：

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

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

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

【讨论】：

你是对的。谢谢您的帮助。 .value 在 Chrome 中不起作用，但 .innerText 可以。
这不是 OP 特定问题的正确答案。 <input> 没有 innerText

【解决方案3】：

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

1-innerHTML

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

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

2-innerText

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

这也将实现结果，但它在引擎盖下很重，因为它需要一些布局系统信息，因此会降低性能。与innerHTML 不同，您不能使用它插入HTML 标记。 Check Performance Here

3-文本内容

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

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

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

【讨论】：

我的按钮是这样的：所以使用 value 不起作用，但使用 textContent 就可以了。感谢分享！

【解决方案4】：

另一种解决方案是在 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");
}}

【讨论】：

【解决方案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;    
}

【讨论】：