如何使用 jQuery 在按钮单击时更改段落标签的文本？

Question

My problem is mainly trying to add the function with jQuery to change the paragraph tag text highlighted below, to a new text. I just need it. You don't need to change the other paragraph tags.

 var titulo = document.querySelector(".ClassB"); var botao = document.querySelector(".troca-texto"); botao.addEventListener("click", function() { textContent = "Tobirama"; })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <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 class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> // <p class="classB">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p><button class="troca-texto" value="">Trocar texto</button> <,-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" --> // <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> <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>

In the JavaScript code above I tried to get the button and tag ids and it didn't work.

Answer 1

It depends to kind of tag you want to use.

For example try this:

$(this).attr("tag","Tobirama");

 var titulo = document.querySelector(".ClassB"); var botao = document.querySelector(".troca-texto"); botao.addEventListener("click", function() { $(this).attr("tag","Tobirama"); })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <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 class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> // <p class="classB">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p><button class="troca-texto" value="">Trocar texto</button> <,-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" --> // <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> <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>