By clicking on the button the span disappears

Question

By clicking on the button the span disappears

Navigation

#1 by (1 votes)

1

I have a problem, I have a word that when you load the page each letter has a different color 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>')
      );
  })

but when I click on a button to change the word, the span generated by the script disappears, but I need it to remain so to speak.

                <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>

javascript jquery css

asked by C. Bustos Alvaro 06.08.2018 в 00:58

source

1 answer

Data type to store Postgresql coordinates How to capture html button click to call an android java method?

score 1 · Accepted Answer

The problem is that the word is colored only when the page is started, and when you assign it a new one in document.querySelector ('# word'). innerHTML = body; will not be colored because the page is already started, I advise you to make a function to color or an event. For an example work with "Hello world" in a static way and I put a name to your coloring function (); I call this once the page is loaded and when I enter a var button. I hope it helps you.

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>