Cómo cambiar el texto de los botones usando Javascript

Question

Tengo el siguiente código para establecer el texto del botón a través del código de JavaScript, pero no funciona, sigue siendo el mismo el texto sigue siendo el mismo.

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

Y mi html código del botón es

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

Answer 1

Debe utilizar value en lugar de innerHTML .

Pruebe esto.

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

Y puesto que está ejecutando el botón en server la identificación puede mezclarse o en el marco. Así que, intente

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

Otra forma mejor de hacerlo es así.

En el marcado, cambie su onclick de esta manera. onclick="showFilterItem(this)"

Ahora utilizar de esta manera

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

Answer 2

Puede alternar filterstatus valor como esto

filterstatus ^= 1; 

lo tanto, su función parece

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

Answer 3

Otra solución podría estar utilizando el botón jQuery selector dentro de la declaración if else $ ("# butto nId "). texto (" su texto ");

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

Answer 4

innerText es la respuesta correcta actual para esto. Las otras respuestas están desactualizadas e incorrectas.

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

innerHTML también funciona y se puede utilizar para insertar HTML.

Answer 5

Sé que esta pregunta ha sido respondida, pero también veo que falta algo más que me gustaría cubrir. Hay muchas formas de lograrlo.

1- innerHtml

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

Puede insertar HTML en esto. Pero la desventaja de este método es que tiene ataques de seguridad entre sitios. Entonces, para agregar texto, es mejor evitar esto por razones de seguridad.

2- innerText

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

Esto también conseguir el resultado pero su pesada bajo el capó ya que requiere algo de información sistema de diseño, debido a que el rendimiento disminuye. A diferencia de innerHTML, no puede insertar las etiquetas HTML con esto. Check Performance Here

3- textContent

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

Esto también lograr el mismo resultado, pero no tiene problemas de seguridad como innerHTML ya que no analiza HTML como innerText. Además, también es ligero debido a que el rendimiento aumenta.

Así que si se debe agregar un texto como el anterior, entonces es mejor usar textContent.