es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Usar JavaScript para alternar dinámicamente los íconos de Font Awesome no devuelve el ícono original.

Usar JavaScript para alternar dinámicamente los íconos de Font Awesome no devuelve el ícono original.

06 Aug, 2023 Programación

Tengo un botón que se ve así:

<button class="btn btn-sm btn-xs-block btn-success" :data-lane-id="items[0].lane.id" type="button" v-on:click="callNextCustomer(items[0].lane.id)" :class="hasMorePeople(items)">
  Siguiente Cliente <i class="fas fa-bell"></i>
</button>

Cuando se presiona el botón, la función callNextCustomer ejecuta lo siguiente:

const spinnerIcon = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
var button = document.querySelectorAll('button[data-lane-id="'+lane_id+'"]');
button[0].disabled = true;
button[0].innerHTML = 'Siguiente Cliente ' + spinnerIcon;
// ejecutar una solicitud externa usando una promesa
// cuando esté completo, ejecutar lo siguiente
button[0].disabled = false;
button[0].innerHTML = 'Siguiente Cliente <i class="fas fa-bell"></i>';

Cuando el código se ejecuta, el texto cambia según lo esperado, pero el icono no se muestra. Usando el Inspector de Google Dev puedo ver que el marcado del icono está presente.

¿Alguien puede explicar por qué no se muestra? Estoy usando Font Awesome v5, cargo tanto el CSS como el JS en mi página, cargo el siguiente JS:

<script data-search-pseudo-elements="" defer="" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que el archivo Javascript de font-awesome se está cargando con el atributo defer, lo que significa que no se ejecutará hasta que la página haya finalizado el análisis. Sin embargo, el innerHTML del botón se está cambiando antes de que se ejecute el script de font-awesome y reemplace la etiqueta <i> con el icono apropiado.

    Para solucionar el problema, una solución sería utilizar el evento window.onload para asegurarse de que el script de font-awesome se ejecute antes de intentar modificar el innerHTML del botón. Por ejemplo:

    const spinnerIcon = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
var button = document.querySelectorAll('button[data-lane-id="' + lane_id + '"]')
button[0].disabled = true;
window.onload = function() {
  button[0].innerHTML = 'Siguiente cliente <i class="fas fa-bell"></i>';
}
// ejecutar solicitud externa usando promesa
// cuando se complete, ejecutar lo siguiente
button[0].disabled = false;
button[0].innerHTML = 'Siguiente cliente ' + spinnerIcon;

    Alternativamente, podrías eliminar el atributo defer de la etiqueta de script de font-awesome para cargarlo de forma síncrona con el resto de la página.

Comments are closed.