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

MetricalJa
February 6, 2023
105 views
2 votes
3 Answers

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");

  });

});

});

Answers

- RAllen
- February 6, 2023 at 3:12 am
- 0 votes
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.

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()....

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers