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" onclick="salvar()">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
    /**/

}
   

Comentários (0)

Nenhum comentário ainda. Seja o primeiro.

Continue lendo

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 repositório: https://github.com/paulodm145/tetris Estrutura do Projeto /projeto-tetris │ ├── index.html ├──…

Artigo, Intermediários
Parte 3: o agente, a checklist e os limites de um RAG mínimo

Parte 3: o agente, a checklist e os limites de um RAG mínimo

Na última parte da série, um agente do Laravel AI SDK usa a busca vetorial como ferramenta e devolve uma checklist validada por schema, com o trecho e a página de cada exigência. Depois vêm a tela em React e uma lista do que um RAG mínimo deixa de fora.

Artigo, Avançados, Banco de dados, Docker, FrontEnd, Inteligência Artificial, Intermediários, Laravel, php, Postgres