Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

remove-livro.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null

código do script remove-livro.js:

let tabelaLivros = document.querySelector('#livros');
tabelaLivros.addEventListener('click', (evento) => {
    let elementoClicado = evento.target;

    if (elementoClicado.dataset.type == 'remocao') {
        let livroId = elementoClicado.dataset.ref;
        fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
            .then(resposta => {

                let tr = elementoClicado.closest(`#livro_${livroId}`);
                tr.remove();

            })
            .catch(erro => console.log(erro)); 

    }

});

Código html em lista.marko:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1> Listagem de livros </h1>

        <table>
            <tr>
                <td>ID</td>
                <td>Título</td>
                <td>Preco</td>
                <td>Editar</td>
                <td>Remover</td>
            </tr>
                <tr id="livro_${livro.id}" for(livro in data.livros)>
                <td>${livro.id}</td>
                <td>${livro.titulo}</td>
                <td>${livro.preco}</td>
                <td><a href="#">Editar</a></td>
                <td><a href="#" data-ref="${livro.id}" data-type="remocao">Remover</a></td>
            </tr>
        </table> 
        <script src="/estatico/js/remove-livro.js"></script> 
    </body> 
</html>

Estou com o erro

remove-livro.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null at remove-livro.js:2

aparecendo no console do chrome, estou usando o código exatamente como você utilizou, professor! Me tire dessas trevas por favor. Conferi mil vezes o código, o que poderia ser?

3 respostas
solução!

Boa noite, Talitha! Como vai?

Eis que o instrutor surgiu para guiá-la ao caminho da luz do conhecimento!

Faltou apenas adicionar o id="livros" na table! Pois é justamente o seletor de id que eu utilizo ao fazer document.querySelector('#livros')! Como vc acabou omitindo o id, o JS não consegue encontrar a tabela e lança esse erro dizendo que não consegue invocar o método addEventListener() a partir de um valor nulo! O correto seria:

<table id="livros">
     <!-- Restante do código da tabela. -->
</table>

Fazendo essa modificação as coisas devem funcionar como esperado! Contudo, caso ainda dê algum problema é só comentar aqui que eu continuo a te ajudar!

Espero que esteja curtindo e aproveitando ao máximo todo o conteúdo do curso!

Grande abraço e bons estudos, minha aluna!

Entendi o erro, muito obrigada! Agora estou com outro problema, acabei decidindo refazer a aula toda, e agora ao clicar em remover, recebo a mensagem de erro 500 no console do navegador, enquanto o console do node (prompt) exibe a mensagem

TypeError: livroDao.remove is not a function at C:\Users\Rennan\Desktop\programaNode\src\app\rotas\rotas.js:48:18

meu código está assim em rotas.js:

   app.delete('/livros/:id', function(req, resp) {
        const id = req.params.id;

        const livroDao = new LivroDao(db);
        livroDao.remove(id)
            .then(() => resp.status(200).end())
            .catch(erro => console.log(erro));

    });

E está assim em livro-dao.js:

class LivroDao {

    constructor(db) {
        this._db = db;
    }

    lista() {
        return new Promise((resolve, reject) => {
            this._db.all(
                'SELECT * FROM livros',
                (erro, resultados) => {
                    if (erro) return reject('Não foi possível listar os livros!');

                    return resolve(resultados);
                }
            )
        });
    }

    adiciona(livro) {
        return new Promise((resolve, reject) => {
            this._db.run(`
                INSERT INTO LIVROS (
                        titulo,
                        preco,
                        descricao
                    ) values (?, ?, ?)
                `,
                [
                    livro.titulo,
                    livro.preco,
                    livro.descricao
                ],
                function (err) {
                    if (err) {
                        console.log(err);
                        return reject('Não foi possível adicionar o livro!');
                    }

                    resolve();
                } 
            )       
        });
    };
}

module.exports = LivroDao;

Eu revi várias vezes o código, e acho que não entendi o que o senhor quis dizer quando chama "remove(id)" sem ter o método lá na classe livroDao, assim como temos o adiciona e o lista, não deveríamos ter um remover?

Obrigada!

Talitha, vc provavelmente pulou essa atividade obrigatória! Nela, o LivroDao é finalizado com os métodos que faltam! Dá uma olhada e veja se as coisas funcionam como deveriam, minha aluna!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software