如何使用javascript更改按钮文本

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()" />

6 个解决方案

#1

You must use value instead of ~~innerHTML~~ .

您必须使用值而不是innerHTML。

Try this.

尝试这个。

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

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

而且由于您在服务器上运行按钮，ID可能会在框架中受到损坏。我是这样，试试吧

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

Another better way to do this is like this.

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

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

在标记上，像这样更改你的onclick。的onclick = “showFilterItem（这）”

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

#2

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。

#3

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- innerHTML

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- innerText

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- textContent

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。

#4

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

另一个解决方案是在if else语句$（“＃buttonId”）中使用jquery按钮选择器.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

You can toggle filterstatus value 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;    
}

#6

I'm sort of 'necroing' this old post, but there is a forth way to do this.

我对这个老帖子有点“捣蛋”，但还有第四种方法可以做到这一点。

function changeButton(){
document.getElementById("buttontext").innerHTML = "Yay! :D";
}

<button onclick='changeButton()'>
<span id='buttontext'>Button text!</span>
</button>

Instead of changing the value of the button, you can just instead change the value of the text inside the button. :)

您可以改为按钮内的文本值，而不是更改按钮的值。 :)

#1