web-dev-qa-db-fra.com

Comment changer le texte des boutons en utilisant javascript

J'ai le code suivant pour définir le texte du bouton via le code javascript, mais cela ne fonctionne pas, il reste le même, le texte reste le même.

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

Et mon code de bouton html est

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

Vous devez utiliser value au lieu de innerHTML.

Essaye ça.

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

Et puisque vous exécutez le bouton à server, l'ID peut être mutilé dans le cadre. Moi si, essayez

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

Une autre meilleure façon de faire est comme ça.

Sur le balisage, changez votre onclick comme ceci. onclick="showFilterItem(this)"

Maintenant, utilisez-le comme ça

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

innerText est la réponse correcte actuelle pour cela. Les autres réponses sont obsolètes et incorrectes.

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

innerHTML fonctionne également et peut être utilisé pour insérer du code HTML.

47
Maitreya

Je sais que cette question a reçu une réponse, mais je constate également qu’il manque un autre moyen que j’aimerais aborder. Il existe de nombreux moyens d’y parvenir.

1- innerHTML 

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

Vous pouvez insérer du HTML dans ceci. Mais l’inconvénient de cette méthode est qu’elle a des attaques de sécurité entre sites . Donc, pour ajouter du texte, il vaut mieux éviter cela pour des raisons de sécurité.

2- innerText 

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

Cela permettra également d'obtenir le résultat, mais sa lourdeur sous le capot, car elle nécessite des informations système de configuration , ce qui entraîne une diminution des performances. Contrairement à innerHTML, vous ne pouvez pas insérer les balises HTML avec cela. Vérifier les performances ici

3- textContent 

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

Cela aboutira également au même résultat, mais ne posera pas de problèmes de sécurité tels que innerHTML, car il n'analysera pas le code HTML comme innerText. En outre, il est également léger en raison de l'augmentation des performances.

Donc, si un texte doit être ajouté comme ci-dessus, il est préférable d'utiliser textContent.

17
HebleV

Une autre solution pourrait être d'utiliser le sélecteur de bouton jQuery à l'intérieur de l'instruction if else $ ("# buttonId"). Text ("votre texte");

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");
}}
3
Jakub H.

Vous pouvez basculer la valeur filterstatus comme ceci

filterstatus ^= 1;

Donc, votre fonction ressemble à

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