1 min de leitura ·

Dúvida manipulação do DOM com Javascript

To aplicando uma função que remove e adiciona uma classe a um elemento

Mas na função, em vez dele referenciar o elemento no DOM, ele remove e adiciona a classe em uma instância daquele elemento, como se fosse uma cópia

O element vem através do path de um evento de clique

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

const action = {
    edit: (id, db_client, element) => {
        pulseToggle(element)  
}

O retorno do togglePulse() em log retorna uma div idêntica a que estou tentando modificar, mas não a que está presente no DOM

Como faço para referenciar o elemento no DOM em vez de instanciar uma cópia dele?

A única forma de referenciar essa div é por meio de um ID que está presente no botão (element) dentro dela

farleyguimaraes

2 anos atrás

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

Autor

2 anos atrás

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

2 anos atrás

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

Autor

2 anos atrás

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