Question 11313 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Change the text color of all paragraphs with the click of the button – Jquery

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 class="container-fluid p-5 bg-primary text-white text-center">

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

</div>

  

<div class="container mt-5">

  <div class="row div1">

    <div class="col-sm-4 coluna1">

      <p id="test" class="classA">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 class="btnDoc">

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

    </td>   

    

    

</div>

    

     

     

     

     

      <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

      </ul>

    </div>

    <div class="col-sm-4 coluna2">

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

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

    </div>

    <div class="col-sm-4 coluna3">      

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

      <p class="classF">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 class="row div2">

    <h1>x caracteres</h1>

    <div class="col-12">

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

    </div>

  </div>

  <div class="row div3">

    <ul>

        <li>C++</li>

        <li>JAVA</li>

        <li>Python</li>

        <li>HTML/CSS</li>

      </ul>

  </div>

</div>

<div class="container-fluid rodape">

</div>

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

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

</body>

</html>

$(document).ready(function(){

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

      $("p").on({

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

  });

});

});
Tags:

3

Answers


  1. 0

    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");
  });
});
    Login or Signup to reply.
  2. 0

    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 class="container-fluid p-5 bg-primary text-white text-center">
      <h1>Criando páginas com jQuery</h1>
    </div>
    <div class="container mt-5">
      <div class="row div1">
        <div class="col-sm-4 coluna1">
          <p id="test" class="classA">
            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"
            class="btn btn-warning btn-xs 189738"
          >
            Clique aqui
          </button>

          <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
          </ul>
        </div>
        <div class="col-sm-4 coluna2">
          <p class="classC">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </p>
          <p class="classD">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
        <div class="col-sm-4 coluna3">
          <p class="classE">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </p>
          <p class="classF">
            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 class="row div2">
        <h1>x caracteres</h1>
        <div class="col-12">
          <input
            class="contar"
            type="text"
            value="Vamos contar os caractesres?"
          />
        </div>
      </div>
      <div class="row div3">
        <ul>
          <li>C++</li>
          <li>JAVA</li>
          <li>Python</li>
          <li>HTML/CSS</li>
        </ul>
      </div>
    </div>
    <div class="container-fluid rodape"></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()....

    Login or Signup to reply.
  3. 0

    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 class="container-fluid p-5 bg-primary text-white text-center">

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

</div>

  

<div class="container mt-5">

  <div class="row div1">

    <div class="col-sm-4 coluna1">

      <p id="test" class="classA">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 class="btnDoc">

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

    </td>   

    

    

</div>

    

     

     

     

     

      <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

      </ul>

    </div>

    <div class="col-sm-4 coluna2">

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

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

    </div>

    <div class="col-sm-4 coluna3">      

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

      <p class="classF">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 class="row div2">

    <h1>x caracteres</h1>

    <div class="col-12">

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

    </div>

  </div>

  <div class="row div3">

    <ul>

        <li>C++</li>

        <li>JAVA</li>

        <li>Python</li>

        <li>HTML/CSS</li>

      </ul>

  </div>

</div>

<div class="container-fluid rodape">

</div>

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

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

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search