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 das HTMLElementist input[type='button'], input[type='submit']usw.

<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 das HTMLElementist button[type='button'], button[type='submit']usw:

<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

• inputist ein leeres Tag und kann nicht haben innerHTML , innerTextodertextContent
• buttonist ein Tag - Container und haben kann innerHTML , innerTextodertextContent

Ignorieren Sie diese Antwort, wenn Sie keine asp.net-Webformulare, asp.net-ajax und rad-grid verwenden

Sie müssen valueanstelle von verwenden innerHTML.

Versuche dies.

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

Und da Sie die Schaltfläche an serverder ID ausführen, wird sie möglicherweise im Framework beschädigt. 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 behandeln möchte. Es gibt mehrere Möglichkeiten, dies zu erreichen.

1- innerHTML

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

Sie können HTML in dieses einfügen. Der Nachteil dieser Methode ist jedoch, dass sie standortübergreifende Sicherheitsangriffe aufweist . Um Text hinzuzufügen, ist es aus Sicherheitsgründen besser, dies zu vermeiden.

2- innerText

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

Dies wird auch das Ergebnis erzielen, ist jedoch schwer unter der Haube, da einige Informationen zum Layoutsystem erforderlich sind, wodurch die Leistung abnimmt. Im Gegensatz zu innerHTML können Sie damit keine HTML-Tags einfügen. Überprüfen Sie hier die Leistung

3- Textinhalt

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

Dadurch wird auch das gleiche Ergebnis erzielt, es treten jedoch keine Sicherheitsprobleme wie innerHTML auf, da HTML wie innerText nicht analysiert wird. Außerdem ist es auch leicht, wodurch die Leistung steigt.

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

Eine andere Lösung könnte darin bestehen, die Auswahlschaltfläche jquery in der if else-Anweisung $ ("# buttonId"). Text ("your text") zu verwenden.

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 den filterstatusWert wie folgt umschalten

filterstatus ^= 1;

Ihre Funktion sieht also so 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;    
}