Tengo muchos botones, 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 dos botones:
<a href="#" class="button">Sign up</a>
<a href="#" class="button">Get started</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];
span += "<div>";
for (i = 0; i < button.innerText.length; i++)
{
span += "<span>";
if (button.innerText[i] !== " ")
{
span += button.innerText[i];
}
else
{
span += " ";
}
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".
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> </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> </span>
<span>u</span>
<span>p</span>
</div>
<div>
<span>G</span>
<span>e</span>
<span>t</span>
<span> </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.
Llevo horas tratando de resolverle, me recomendaron cambiar a JQuery pero la verdad necesito ayuda con ello... apenas estoy comenzando con JavaScript.
Gracias.