So ändern Sie den Text der Schaltflächen mit Javascript

Ich habe den folgenden Code, um den Text der Schaltfläche durch Javascript-Code festzulegen, aber es funktioniert nicht, es bleibt gleich, der Text bleibt gleich.

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

Und mein HTML-Button-Code ist

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

Wenn die HTMLElement ist input[type="button"], input[type="submit"]etc.

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

ändern Sie es mit diesem Code:

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

Wenn, die HTMLElement ist button[type="button"], button[type="submit"]etc:

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

ändern Sie es mit einer dieser Methoden,

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

Bitte beachte, dass

• input ist ein leeres Etikett und nicht haben können innerHTML, innerText oder textContent
• button ist ein Container-Tag und haben kann innerHTML, innerText oder textContent

Ignorieren Sie diese Antwort, wenn Sie asp.net-web-forms, asp.net-ajax und rad-grid nicht verwenden

Sie müssen verwenden value Anstatt von innerHTML.

Versuche dies.

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

Und da läufst du den Button an server Die ID kann im Framework verstümmelt werden. Ich versuche es

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

Ein anderer besserer Weg, dies zu tun, ist so.

Ändern Sie beim Markup Ihr ​​onclick-Attribut wie folgt. onclick="showFilterItem(this)"

Verwenden Sie es jetzt so

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

innerText ist die aktuell richtige Antwort darauf. Die anderen Antworten sind veraltet und falsch.

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

innerHTML funktioniert auch und kann zum Einfügen von HTML verwendet werden.

Ich weiß, dass diese Frage beantwortet wurde, aber ich sehe auch, dass ein anderer Weg fehlt, den ich abdecken möchte. Es gibt mehrere Möglichkeiten, dies zu erreichen.

1- innerHTML

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

Darin können Sie HTML einfügen. Aber der Nachteil dieser Methode ist, es hat Cross-Site-Sicherheitsangriffe. Wenn Sie also Text hinzufügen möchten, sollten Sie dies aus Sicherheitsgründen besser vermeiden.

2- InnerText

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

Dies wird auch das Ergebnis erzielen, aber es ist schwer unter der Haube, da es erfordert einige Layoutsysteminformationen, wodurch die Leistung abnimmt. Im Gegensatz zu innerHTML können Sie hiermit keine HTML-Tags einfügen.
Überprüfen Sie die Leistung hier

3- Textinhalt

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

Dies wird auch das gleiche Ergebnis erzielen, aber es hat keine Sicherheitsprobleme wie innerHTML, da es HTML nicht wie innerText analysiert. Außerdem ist es auch leicht, wodurch die Leistung steigt.

Wenn also wie oben ein Text hinzugefügt werden muss, dann ist es besser, textContent zu verwenden.

Eine andere Lösung könnte darin bestehen, den jquery-Button-Selektor innerhalb der if else-Anweisung zu verwenden $(“#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");
}}

Sie können umschalten filterstatus wert so

filterstatus ^= 1;

So sieht Ihre Funktion aus

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