Changing the text of the Button

Asked

Viewed 481 times

2

I would like to change the text of the button after confirmation reading, however as I have several equal elements in the DOM, how do I change only the text of the button in question.

<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
javascript html jquery

3 answers

2

Follow an example!

After capturing the element clicked by the class, just use this to indicate that you want to change the element clicked! 

$(".btn").click(function(e){
  $(this).text("mudei");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>

  • 1

    I thought of this form of implementation, however I am developing for in the Fluig ERP of Totvs ,that its specification. Not to mention that click event would capture the btn click of the modal, because it has btn that opens modal that other btn confirmation.In case I wanted to change text of the 1st button.

  • is just an example, you can add a specific class for the modal btns, so the click will work without problem!

1

What if it were done this way? You would only put the onClick event on the button itself that you want to have that confirmation. And could even pass some other information to make a if, if necessary.

confirmaLeitura = (elemento)=>{
  elemento.textContent = "Leitura Confirmada";
}
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738" onClick="confirmaLeitura(this)">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Este botão não terá confirmação</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738" onClick="confirmaLeitura(this)">Confirma Leitura</button></td>

  • Try to be clearer,both implementation suggestion does not suit me,because the flow and the following;I have a button where opens a modal with a term,when user click the modal confirmation button,ai yes change the text of the button that displays the modal.

1

I prefer this approach! Any doubt shouts there. Stay with God!

        const btn = document.querySelectorAll('#dados')

        btn.forEach(x => {
            x.addEventListener('click', () => x.innerHTML = "Leitura Confirmada")
        })
        <td class="btnDoc">
            <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button>
        </td>
        <td class="btnDoc">
            <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button>
        </td>
        <td class="btnDoc">
            <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button>
        </td>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.