Tengo problemas para cambiar la clase span cuando está anidada dentro del elemento del botón con Javascript.

Estoy tratando de hacer que parezca así http://www.bootply.com/128062# y He verificado que el CSS funciona.

HTML

<button id="submitbutton" class="btn btn-primary btn-lg" type="submit" onclick="onclickFunction();">
    <span id ="submit_span" class=""></span> Submit</button>

JavaScript

function onclickFunction() {
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning';
    document.getElementById('submitbutton').innerHTML = 'Loading...';
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}
0
jmcgrath207 11 may. 2016 a las 23:05

3 respuestas

La mejor respuesta

Estás destruyendo el elemento <span> cuando escribes en el .innerHTML del botón.

En su lugar, seleccione el .lastChild del botón y actualice su .data (suponiendo que es donde desea que vaya el texto) .

function onclickFunction() {
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning';
    document.getElementById('submitbutton').lastChild.data = 'Loading...';
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}

Su código sería más corto y limpio si acaba de pasar this en la función.

function onclickFunction(btn) {
  // The button element
  btn.className = 'btn btn-lg btn-warning';

  // The last text node in the button
  btn.lastChild.data = 'Loading...';

  // The first element (span) in the button
  btn.firstElementChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}
.btn.btn-lg.btn-warning {
  background: orange
}

.glyphicon {
  padding: 10px;
  background: red;
  }
<button onclick="onclickFunction(this);" id="submitbutton" class="btn btn-primary btn-lg" type="submit">
  <span id="submit_span" class="">x</span> Submit
</button>

Ajuste los elementos que se actualizan según sea necesario. No estoy seguro de dónde exactamente esperabas que fueran las cosas.

3
3 revsuser1106925 12 may. 2016 a las 00:27

La respuesta que brindó entrecerró los ojos no estaba lejos, pero no era correcta. Tuve que cambiarlo también esto. Anterior

// The first element (span) in the button

btn.firstChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';

Después

btn.firstElementChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';

Descubrí esto al ir a Chrome, inspeccionar el elemento, inspeccionar las propiedades DOM, expandir el botón en la consola y verá firstElementChild.

0
sonance207 11 may. 2016 a las 22:24

La secuencia correcta debería ser esta:

function onclickFunction() {
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning';
    document.getElementById('submit_span').innerHTML = 'Loading...';
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}
0
dlopez 11 may. 2016 a las 20:14