PauloRB.dev

Desenvolvedor de Software

Alterar função ONCLICK de um botão com JavaScript Vanilla | PauloRB.dev Alterar função ONCLICK de um botão com JavaScript Vanilla – PauloRB.dev
Alterar função ONCLICK de um botão com JavaScript Vanilla

Alterar função ONCLICK de um botão com JavaScript Vanilla

Vamos lá a mais um estudo de caso.

Na tela abaixo temos um crud simples cujo frontend foi feito com Vanilla JavaScript e assim surgiu-se a necessidade de que ao clicar no botão atualiza o evento ONCLICK do botão registrar tivesse sua função modificada e seu texto alterado.

O Código do botão REGISTRAR está da seguinte forma:

<button type="button" id="btnOperacoes" onclick="salvar()" class="btn btn-success mt-2">Registrar</button>

Ao clicarmos em um dos botões de edição na tabela ao o botão de registro deve ter seu texto alterado para EDITAR e a função do evento ONCLICK alterada para ” editar({id_do_produto}) ” e para isso adotamos a seguinte solução nos botões responsáveis pela edição dos cadastros:

/* Esta função chamada 'MOSTRAR' faz uma solicitação via GET mostrar o texto no input e alterar a função do botão de confirmação da ação */
const mostrar = (id) => {

    // Solicitação GET.
    fetch(`/api/produtos/${id}`,{
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
        // Tratamento do sucesso
        .then(async (response) => {
            const resultado = await response.json();
            
            /*Input descrição recebe o texto buscado*/
            document.querySelector("#descricao").value = resultado.descricao;

            /*Aqui trocamos o texto do botão de Registrar para Editar*/
            document.querySelector("#btnOperacoes").innerHTML = "Editar";

            /*Aqui trocamos a classe css que altera a cor do botão*/
            document.querySelector("#btnOperacoes").classList.remove("btn-success");
            document.querySelector("#btnOperacoes").classList.add("btn-primary");

            /* Através da função set atribute pode alterar qual função deve ser aplicada ao botão escolhido */
            document.querySelector("#btnOperacoes").setAttribute("onclick", `atualizar(${id})`);

        })
        .catch(err => console.log('Erro de solicitação', err)); // lidar com os erros por catch
    /**/

}

 

 

Mais Posts

Como ignorar permissões do Linux em repositórios GIT.

Como ignorar permissões do Linux em repositórios GIT.

Recentemente me deparei com um problema curioso que ocorre no GIT principalmente enquanto escrevemos código em modo root e depois... Leia mais

Entendendo o Service Container no Laravel

Entendendo o Service Container no Laravel

Quando você trabalha com Laravel, uma das ferramentas mais poderosas sob o capô é o Service Container. Mas o que... Leia mais

Controlando um Semáforo e Servo Motor com Arduino: Um Projeto Prático para Iniciantes

Controlando um Semáforo e Servo Motor com Arduino: Um Projeto Prático para Iniciantes

A robótica e a eletrônica são áreas fascinantes que combinam criatividade e lógica para construir soluções incríveis. Hoje, vamos explorar... Leia mais

Como Unir Múltiplos Arquivos PDF em um Único Documento Usando Python

Como Unir Múltiplos Arquivos PDF em um Único Documento Usando Python

No dia a dia, muitas vezes nos deparamos com a necessidade de unir vários arquivos PDF em um único documento.... Leia mais