2

Tengo muchos botones, con dos clases diferentes, los cuales tienen una transición que parte a través de separar el texto de los mismos letra por letra y colocar cada una en un span.

Para explicarlo mejor, tengo estos tres botones:

<a href="#" class="button">Sign up</a>
<a href="#" class="button">Get started</a>
<a href="#" class="button2">Continue</a>

Con esta funcion en JavaScript logré lo que quería:

(function() {
  var elems, button, i, span = "";
  elems = document.querySelectorAll('.button').length;
    for (j = 0; j < elems; j++)
    {
        button = document.querySelectorAll(".button")[j];
        let span = "<div>";
        for (i = 0; i < button.innerText.length; i++)
        {
            span += "<span>";
            if (button.innerText[i] !== " ")
            {
              span += button.innerText[i];
            }
            else
            {
              span += "&nbsp";
            }
            span += "</span>";
        }
        span += "</div>";
        button.innerHTML = span;
    }
}());

Pero sucede que debido a que tienen la misma clase "button", el texto concatenado del primer botón ("Sign up") se suma al siguiente y se ve así: "Sign up Get started".

introducir la descripción de la imagen aquí

Haciendo un console.log(button.innerHTML); dentro del primer foreach obtuve esto:

<div>
    <span>S</span>
    <span>i</span>
    <span>g</span>
    <span>n</span>
    <span>&nbsp;</span>
    <span>u</span>
    <span>p</span>
</div>

En el segundo botón se concatena todo así:

<div>
    <span>S</span>
    <span>i</span>
    <span>g</span>
    <span>n</span>
    <span>&nbsp;</span>
    <span>u</span>
    <span>p</span>
</div>
<div>
    <span>G</span>
    <span>e</span>
    <span>t</span>
    <span>&nbsp;</span>
    <span>s</span>
    <span>t</span>
    <span>a</span>
    <span>r</span>
    <span>t</span>
    <span>e</span>
    <span>d</span>
</div>

La idea es que cada botón tenga su texto aparte con el fin de poder hacer la transición que les comento, que de verdad no viene al caso acá ya que es por css y al tener ambos textos de los botones correctamente este funciona perfecto.

Tambien, el tercer botón que tiene el texto "Continue" y la clase "button2" lo necesito hacer con la misma función pero tampoco tengo la idea de como reutilizar el código para cualquier clase de botón que tengo en el proyecto.

Llevo horas tratando de resolverle, me recomendaron cambiar a JQuery pero la verdad necesito ayuda con ello... apenas estoy comenzando con JavaScript.

Gracias.

4
  • En vez de inicializar la variable, estás concatenado span += "<div>";, debiendo ser let span = "<div>";
    – Triby
    Commented el 22 sept. 2020 a las 21:23
  • Excelente... ahora si me funciona. Y si por ejemplo tengo otro botón con la clase "button2" y quiero reutilizar ese código se puede o que me recomiendas? creo una función nueva para ese u otros botones que tengo?... ya que en varios botones con estilos diferentes necesito colocarles esa transición
    – roberthung
    Commented el 22 sept. 2020 a las 21:29
  • Crea una función donde envíes la clase como parámetro y coloca ahí dentro tu código actual.
    – Triby
    Commented el 22 sept. 2020 a las 21:31
  • Guau! me podrías orientar para ello? es que de verdad entiendo poco la lógica de JS
    – roberthung
    Commented el 22 sept. 2020 a las 21:37

1 respuesta 1

1

Crea la función para aplicar los cambios y, cuando se cargue el DOM, ejecútala, enviando como parámetro la clase de los elementos que quieres modificar:

(function() {
    a2span('.button');
    a2span('.button2');
}());

function a2span(clase) {
    document.querySelectorAll(clase).forEach(button => {
        let text = button.innerText;
        let span = "<div>";
        for (i = 0; i < text.length; i++)
        {
            span += "<span>";
            if (text[i] !== " ")
            {
              span += text[i];
            }
            else
            {
              span += "&nbsp";
            }
            span += "</span>";
        }
        span += "</div>";
        button.innerHTML = span;
    });
}
.button, .button2 {
    display:inline-block;
    color:#fff;
    margin:10px;
    padding:10px 20px;
    border-radius:10px;
}
.button { background:#6ad; }
.button2 { background:#f60; }
.button span, .button2 span {
    font-family:Arial;
    font-weight:bold;
}
<a href="#" class="button">Sign up</a>
<a href="#" class="button">Get started</a>

<a href="#" class="button2">Botón 2</a>
<a href="#" class="button2">Otro botón 2</a>

En lugar de obtener primero los elementos, recorrer con un ciclo y crear variables intermedias, puedes hacer todo en una misma línea:

  • document.querySelectorAll(clase) es para obtener todos los elementos por la clase especificada
  • .forEach(button => { ... }) recorre los elementos y crea la variable button para usarla dentro de la función flecha
  • Dentro, creas una variable text con el contenido del elemento y es la que usas para el ciclo donde agregas los span
3
  • Amigo, excelente... así me voy orientando mejor y aprendiendo, pues lógica tengo pero me he enfrascado en php y Laravel tanto que uno se ciega ante otros conocimientos. De verdad mil gracias!!!
    – roberthung
    Commented el 22 sept. 2020 a las 22:00
  • @roberthung, por favor edita la pregunta para quitar el += y agregar que quieres hacerlo con 2 o más clases, para que no termine cerrada.
    – Triby
    Commented el 22 sept. 2020 a las 22:01
  • Listo... ya la edite... Tienes razón, tenia que colocar que queria reutilizar el código en la misma pregunta
    – roberthung
    Commented el 22 sept. 2020 a las 22:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.