Change the text color of all paragraphs with the click of the button-CodePudding

I'm trying to create a function that changes the color of all the paragraphs (p) when the button is clicked, however I'm not succeeding and I'm not understanding the reason for this.

I wanted to get the "p" tag, but down there in jquery, you can see that it's not working. In addition, the css function is also indifferent, it does not work. I quietly await a response.

Below is the HTML code and below the JS (Jquery):

<!DOCTYPE html>

<html lang="en">

<head>

  <title>jQuery</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>

<div >

  <h1>Criando páginas com jQuery</h1> 

</div>

  

<div >

  <div >

    <div >

      <p id="test" >Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

     

    

     

    

     

     <!-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" -->

     

     

     

<!-- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com 

que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->   

<div>

 

 <td >

    <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" >Clique aqui</button>

    </td>   

    

    

</div>

    

     

     

     

     

      <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

      </ul>

    </div>

    <div >

      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div >      

      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p><button>Clique aqui e altere a cor do parágrafo </button>

      <ul>

        <li>item 1</li>

        <li>item 2</li>

        <li>item 3</li>

      </ul>

    </div>

  </div>

  <div >

    <h1>x caracteres</h1>

    <div >

    <input  type="text" value="Vamos contar os caractesres?"/>

    </div>

  </div>

  <div >

    <ul>

        <li>C  </li>

        <li>JAVA</li>

        <li>Python</li>

        <li>HTML/CSS</li>

      </ul>

  </div>

</div>

<div >

</div>

<script src="questao3.js"></script>

<script src="jquerycolor.js"></script>

</body>

</html>

$(document).ready(function(){

  $("button").click(function(){

      $("p").on({

        $(this).css("red");

  });

});

});

CodePudding user response：

Try without on function, and also you need to supply a style component name that you want to change, like so:

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "red");
  });
});

CodePudding user response：

You have a couple of errors in the syntax, a correct form for what you require would be the following:

$(document).ready(function () {
  $("button").click(function () {
    $(this).parent().find("p").css("color", "red");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jQuery</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
  </head>
  <body>
    <div >
      <h1>Criando páginas com jQuery</h1>
    </div>
    <div >
      <div >
        <div >
          <p id="test" >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </p>
          <!-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" -->
          <!-- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->

          <button
            id="dados"
            data-confirm=""
            data-iddocumento="189738"
            data-descricao="testte"
            type="button"
            
          >
            Clique aqui
          </button>

          <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
          </ul>
        </div>
        <div >
          <p >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </p>
          <p >
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
        <div >
          <p >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </p>
          <p >
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
          <button>Clique aqui e altere a cor do parágrafo</button>
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
          </ul>
        </div>
      </div>
      <div >
        <h1>x caracteres</h1>
        <div >
          <input
            
            type="text"
            value="Vamos contar os caractesres?"
          />
        </div>
      </div>
      <div >
        <ul>
          <li>C  </li>
          <li>JAVA</li>
          <li>Python</li>
          <li>HTML/CSS</li>
        </ul>
      </div>
    </div>
    <div ></div>
    <script src="main.js"></script>
  </body>
</html>

You must set up a good structure in your html so that you don't have to resort to .parent().parent()....

CodePudding user response：

Try this one. If you want to change all elements you need to get all of them and then iterate using "each"

$(document).ready(function(){

  $("button").click(function(){

      $('p').each(function() {
    $(this).css("color", "red");
});

});

});

<!DOCTYPE html>

<html lang="en">

<head>

  <title>jQuery</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<div >

  <h1>Criando páginas com jQuery</h1> 

</div>

  

<div >

  <div >

    <div >

      <p id="test" >Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

     

    

     

    

     

     <!-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" -->

     

     

     

<!-- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com 

que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->   

<div>

 

 <td >

    <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" >Clique aqui</button>

    </td>   

    

    

</div>

    

     

     

     

     

      <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

      </ul>

    </div>

    <div >

      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div >      

      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p><button>Clique aqui e altere a cor do parágrafo </button>

      <ul>

        <li>item 1</li>

        <li>item 2</li>

        <li>item 3</li>

      </ul>

    </div>

  </div>

  <div >

    <h1>x caracteres</h1>

    <div >

    <input  type="text" value="Vamos contar os caractesres?"/>

    </div>

  </div>

  <div >

    <ul>

        <li>C  </li>

        <li>JAVA</li>

        <li>Python</li>

        <li>HTML/CSS</li>

      </ul>

  </div>

</div>

<div >

</div>

<script src="questao3.js"></script>

<script src="jquerycolor.js"></script>

</body>

</html>