如何使用JavaScript更改按钮的文本

pxy2qtax  于 2023-02-28  发布在  Java
关注(0)|答案(5)|浏览(524)

我有下面的代码来设置文本的按钮通过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()" />
1dkrff03

1dkrff031#

如果HTMLElementinput[type='button']input[type='submit']等。

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

使用以下代码更改它:

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

如果,则HTMLElementbutton[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';

请注意

  • inputempty tag,并且不能具有innerHTMLinnerTexttextContent
  • button是 * 容器标记 *,可以具有innerHTMLinnerTexttextContent

如果不使用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";
    }
}
ztmd8pv5

ztmd8pv52#

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

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

innerHTML也可以工作,可以用来插入HTML。

dphi5xsq

dphi5xsq3#

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

1-内部HTML

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

你可以在里面插入HTML。但是这种方法的缺点是,它有跨站点安全攻击。所以对于添加文本,出于安全考虑,最好避免这样做。

2-内部文本

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

这也能达到效果,但它的幕后工作很繁重,因为它需要一些布局系统信息,因此性能会下降。与innerHTML不同,您不能使用此. Check Performance Here插入HTML标记

3-文本内容

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

这也会达到相同的结果,但它没有像innerHTML那样的安全问题,因为它不像innerText那样解析HTML。此外,它也很轻,因此性能有所提高。
因此,如果必须像上面那样添加文本,那么最好使用textContent。

vuktfyat

vuktfyat4#

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

ifmq2ha25#

可以按如下方式切换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;    
}

相关问题