Javascript 如何使用javascript更改按钮文本

How to change the buttons text using javascript

提问by mahesh

I have the following code to set the text of the button through javascript code , but it does not work it remains same the text remains same.

我有以下代码通过 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";
    }
}

And my html button code is

我的 html 按钮代码是

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

采纳答案by naveen

If the HTMLElementis input[type='button'], input[type='submit'], etc.

如果HTMLElement是input[type='button']，input[type='submit']等

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

change it using this code:

使用以下代码更改它：

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

If, the HTMLElementis button[type='button'], button[type='submit'], etc:

如果在HTMLElement是button[type='button']，button[type='submit']等：

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

change it using any of these methods,

使用这些方法中的任何一种更改它，

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

Please note that

请注意

• inputis an empty tagand cannot haveinnerHTML, innerTextor textContent
• buttonis a container tagand can haveinnerHTML, innerTextor textContent

• input是一个空标签，不能有innerHTML,innerText或textContent
• button是一个容器标签，可以有innerHTML,innerText或textContent

---

---

Ignore this answer if you ain't using asp.net-web-forms, asp.net-ajax and rad-grid

如果您不使用 asp.net-web-forms、asp.net-ajax 和 rad-grid，请忽略此答案

You must use valueinstead of innerHTML.

您必须使用value代替innerHTML。

Try this.

尝试这个。

document.getElementById("ShowButton").value= "Hide Filter";

And since you are running the button at serverthe ID may get mangled in the framework. I so, try

而且由于您在serverID处运行按钮可能会在框架中被破坏。我是，试试

document.getElementById('<%=ShowButton.ClientID %>').value= "Hide Filter";

Another better way to do this is like this.

另一种更好的方法是这样的。

On markup, change your onclick attribute like this. onclick="showFilterItem(this)"

在标记上，像这样更改您的 onclick 属性。 onclick="showFilterItem(this)"

Now use it like 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";
    }
}

回答by Maitreya

innerText is the current correct answer for this. The other answers are outdated and incorrect.

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

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

innerHTML also works, and can be used to insert HTML.

innerHTML 也有效，可用于插入 HTML。

回答by HebleV

I know this question has been answered but I also see there is another way missing which I would like to cover it.There are multiple ways to achieve this.

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

1- innerHTML

1-内部HTML

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

You can insert HTML into this. But the disadvantage of this method is, it has cross site security attacks. So for adding text, its better to avoid this for security reasons.

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

2- innerText

2-内部文本

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

This will also achieve the result but its heavy under the hood as it requires some layout system information, due to which the performance decreases. Unlike innerHTML, you cannot insert the HTML tags with this. Check Performance Here

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

3- textContent

3- 文本内容

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

This will also achieve the same result but it doesn't have security issues like innerHTML as it doesn't parse HTML like innerText. Besides, it is also light due to which performance increases.

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

So if a text has to be added like above, then its better to use textContent.

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

回答by Jakub H.

Another solution could be using jquery button selector inside the if else statement $("#buttonId").text("your text");

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

回答by Q07

You can toggle filterstatusvalue like this

你可以filterstatus像这样切换值

filterstatus ^= 1;

So your function looks like

所以你的功能看起来像

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