Как изменить текст кнопок с помощью javascript

У меня есть следующий код, чтобы установить текст кнопки через 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()" />

Ответы

Ответ 1

Вы должны использовать value вместо ~~innerHTML~~.

Попробуй это.

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

И поскольку вы запускаете кнопку на server идентификатор может быть искажен в рамках. Я так, попробую

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

Ответ 2

innerText - текущий правильный ответ для этого. Другие ответы устарели и неверны.

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

innerHTML также работает и может использоваться для вставки HTML.

Ответ 3

Я знаю, что на этот вопрос был дан ответ, но я также вижу, что есть еще один способ, который я хотел бы осветить. Есть несколько способов добиться этого.

1- innerHTML

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

Вы можете вставить HTML в это. Но недостатком этого метода является то, что он имеет атаки на защиту сайта. Поэтому для добавления текста лучше избегать этого по соображениям безопасности.

2- innerText

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

Это также приведет к результату, но его тяжело под капотом, поскольку для этого требуется некоторая информация о макетной системе, из-за которой производительность снижается. В отличие от innerHTML, вы не можете вставлять теги HTML с этим. Проверка производительности здесь

3- textContent

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

Это также приведет к такому же результату, но у него нет проблем безопасности, таких как innerHTML, поскольку он не анализирует HTML, как innerText. Кроме того, это также свет, благодаря которому производительность увеличивается.

Поэтому, если текст должен быть добавлен, как указано выше, то лучше использовать textContent.

Ответ 4

Другим решением может быть использование кнопки выбора jquery внутри оператора if else $ ("# 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");
}}

Ответ 5

Вы можете переключить значение 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;    
}

Ответ 6

Я как бы "некропом" этот старый пост, но есть четвертый способ сделать это.

function changeButton(){
document.getElementById("buttontext").innerHTML = "Yay! :D";
}

<button onclick='changeButton()'>
<span id='buttontext'>Button text!</span>
</button>