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