ReTabNews

Não manjo muito, mas achei um pouco estranho esse element. Ele tem que esta "vinculado" ao elemento na DOM.

Aproveitei para testar esse closest que não conhecia, o cod abaixo está funcional, talvez consiga aproveitar algo

<html>
    <body>
        <div class="todo-item-div">
            <button id="btn">Click</button>
        </div>
    </body>
    

    <script>
        function pulseToggle(element) {
            element.closest('.todo-item-div').classList.toggle('pulse')
        }  

        
        let buttonElement = document.querySelector('#btn')

        buttonElement.addEventListener('click', () => {
            pulseToggle(buttonElement)
        })
    </script>
    
    
    <style>
        .pulse{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    
</html>

vitormarkis há 2 anos

Eae Farley, eu não sei se você ta ligado os caminhos de um evento de clique, que além de vários usos, serve pra pegar qual elemento foi clicado.

Vou dar um exemplo:

document.addEventListener('click', evento => {
    evento.path.reduce(elementoHTML => {
        ...
    },[])
    action[acao](id, db_client, element) // Object literal
})

O element ele vem do reduce do evento.path

Precisei fazer assim porque esse elemento foi gerado dinamicamente, então nao consigo fazer a atribuição direta como você fez no seu codigo

O problema é que a alteração do element, não reflete no DOM

farleyguimaraes há 2 anos

Não conhecia o event.path, mas descobri que precisei dele a algumas semanas.. Tive que fazer maior gambiarra. Infelizmente, não sei como te ajudar. Mas, pelo que entendi o event.path retorna um array com o element que foi clicado na primeira posição. E se tentar passar direto para a function sem fazer o reduce? Reflete na DOM? ``` document.addEventListener('click', event => { pulseToggle(event.path[0]); }) ```

vitormarkis há 2 anos

O `event.path[0]` pegaria o primeiro elemento do array, seria igual ao `event.target` Eu precisei usei o path porque eu tava tentando clicar em um elemento mas ele nem sempre estava em primeiro do array. O que eu poderia fazer é pegar todos os elementos que vinham na frente desse elemento que queria pegar no `event.target` e colocar `pointer-events: none` no CSS deles, assim eles não seriam pegos no `event.path` ou `event.target` Relativo ao primeiro problema que relatei, na verdade era um erro meu Eu tava passando uma string para um objeto, afim de acessar uma função de mesmo nome ``` const acao = 'darOi' const action = { darOi: () => console.log('oi') } action[acao]() // Resultado esperado no log: 'oi' ``` Dentro do objeto action, tinham funcoes como remover, e concluir Então eu acessava essas acoes usando `action[acao]()` e na linha de baixo dava um `atualizarTabela()` O que dava certo, fazia a ação e logo após atualizava a tabela pra mostrar os resultados pós ação de remover ou concluir O problema foi que eu tinha outra function de editar, mas editar nao necessita atualizar a tabela, então `atualizarTabela()` não precisava ser chamado após o `action[acao]()`, e sim na função de salvar as edições Então ele mandava o elemento pro edit, conseguia fazer a referência ao elemento no DOM, mas ele logo em seguida atualizava tabela e eu perdia a referência, erro besta, mas pode servir, e serviu de aprendizado