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

Tutorial de Desenvolvimento: Criando um Jogo de Tetris

Tutorial de Desenvolvimento: Criando um Jogo de Tetris

E vamos a mais um tutorial de outro joguinho clássico só que dessa vez vamos recriar o Tetris. Link do... 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

Onde aprender React ?

Onde aprender React ?

Vamos lá! Em um dia qualquer estava eu a rolar o feed do Linked-In e um determinado post me chamou... Leia mais

Como Redimensionar Imagens Base64 com JavaScript e TypeScript

Como Redimensionar Imagens Base64 com JavaScript e TypeScript

Ao trabalhar com imagens base64 no front-end, é comum precisar redimensioná-las para melhorar o desempenho da aplicação, especialmente ao enviá-las... Leia mais