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 acessar o entity Manager(Doctrine) dentro de comandos no Symfony 5

Como acessar o entity Manager(Doctrine) dentro de comandos no Symfony 5

Ao termos de criar comandos personalizados no Symfony na maioria das vezes se faz necessário o uso de alguma interação... Leia mais

Como atualizar multiplos registros com o método whereIn no Laravel 9 ?

Como atualizar multiplos registros com o método whereIn no Laravel 9 ?

O Laravel 9 é um framework PHP moderno e poderoso que oferece muitas ferramentas úteis para desenvolvedores web. Uma das... Leia mais

Como Usar a Porta 443 para Conexões SSH com o Bitbucket e Contornar Restrições de Rede

Como Usar a Porta 443 para Conexões SSH com o Bitbucket e Contornar Restrições de Rede

Se você já se deparou com a frustrante mensagem de erro “ssh: connect to host bitbucket.org port 22: Network is... Leia mais

Como instalar o Docker no Linux(Ubuntu)

Como instalar o Docker no Linux(Ubuntu)

Para instalar o docker no ubuntu basta seguir os passos abaixo: Abra o terminal do Linux copie e cole os... Leia mais