Executando verificação de segurança...
Em resposta a Dúvida manipulação do DOM com Javascript
1
farleyguimaraes

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>
Carregando publicação patrocinada...
1
vitormarkis

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

1
farleyguimaraes
Autor
Autor

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]);
})
1
vitormarkis

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