1

tengo un problema, tengo una palabra que cuando carga la pagina cada letra tiene un color diferente use

<style>
#word span:nth-child(9n + 1) 
{
 color:#ff2222;
 }
#word span:nth-child(9n + 2) 
{
 color:#22aa22;
}
#word span:nth-child(9n + 3) 
{
 color:#ffaa22;
}
#word span:nth-child(9n + 4) 
{
 color:#aa00aa;
}
#word span:nth-child(9n + 5) 
{
 color:#00aaa0;
}
#word span:nth-child(9n + 6) 
{
 color:#ff06d5;
}
#word span:nth-child(9n + 7) 
{
 color:#9f5522;
}
#word span:nth-child(9n + 8) 
{
color:#a10c97;
}
#word span:nth-child(9n + 9) 
{
color:#22ffcf;
}
</style>

  $(function(){

      $('#word').html(
          $('#word').text().replace(/(\w)/g,'<span>$1</span>')
      );
  })

pero cuando le doy click en un botón para que me cambie la palabra se desaparece los span que me genera el script , pero necesito que se mantenga por decirlo así

                <div class="centro">
                  <h1 id="word">

                    Click On Button

                </h1>
                </div>

                <div>
                  <form method="post" class="centro">
                    <input type="button" name="catg" value="New Word" class="centro w" onclick="boton()">
                  </form>
                </div>

          </div>
 <script  type="text/javascript">
  var boton = function() {
   fetch('sqla.php')
  .then(function(response) {
 return response.text();
   })
    .then(function(body) {
   document.querySelector('#word').innerHTML = body;
   });
   };

  document.addEventListener('click', function() {
   boton();
  });
  </script>

1 respuesta 1

1

El problema es que la palabra se colorea solo al iniciar la página, y al momento de asignarle un nuevo en document.querySelector('#word').innerHTML = body; no se coloreara por que la pagina ya está iniciada, te aconsejo hacer una función para colorear o bien un evento. Para un ejemplo trabaje con “Hola mundo” de manera estática y le puse un nombre a tu función colorear(); a esta la llamo una vez cargada la página y al entrar a var botón. Espero te ayude.

if (document.addEventListener) {
   document.addEventListener("DOMContentLoaded", colorear, false);
}
function colorear(){
      $('#word').html(
         $('#word').text().replace(/(\w)/g,'<span>$1</span>')
      );
 }
 
  var boton = function() {
   /*fetch('sqla.php')
  .then(function(response) {
 return response.text();
   })
    .then(function(body) {
   document.querySelector('#word').innerHTML = body;
   });*/
   
   let body="Hola Mundo";
   document.querySelector('#word').innerHTML = body;
   colorear();
   }

  document.addEventListener('click', function() {
   boton();
  });
#word span:nth-child(9n + 1) 
{
 color:#ff2222;
 }
#word span:nth-child(9n + 2) 
{
 color:#22aa22;
}
#word span:nth-child(9n + 3) 
{
 color:#ffaa22;
}
#word span:nth-child(9n + 4) 
{
 color:#aa00aa;
}
#word span:nth-child(9n + 5) 
{
 color:#00aaa0;
}
#word span:nth-child(9n + 6) 
{
 color:#ff06d5;
}
#word span:nth-child(9n + 7) 
{
 color:#9f5522;
}
#word span:nth-child(9n + 8) 
{
color:#a10c97;
}
#word span:nth-child(9n + 9) 
{
color:#22ffcf;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>
<body>
<div class="centro">
	<h1 id="word"> Click On Button </h1>
</div>
<div>
	<form method="post" class="centro">
    	<input type="button" name="catg" value="New Word" class="centro w" onclick="boton()">
   </form>
</div>
</body>
</html>

Tu Respuesta

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

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