1
resposta

Como eu deveria fazer para abrir e visualizar o evento?

Com o código abaixo

const form = document.getElementById("novoItem")
const lista = document.getElementById("lista")

form.addEventListener("submit", (evento) => {
    evento.preventDefault()

    criaElemento(evento.target.elements['nome'].value, evento.target.elements['quantidade'].value)
})

function criaElemento(nome, quantidade) {
    const novoItem = document.createElement('li')
    novoItem.classList.add("item")

    const numeroItem = document.createElement('strong')
    numeroItem.innerHTML = quantidade

    novoItem.appendChild(numeroItem)
    novoItem.innerHTML += nome

    lista.appendChild(novoItem)
    console.log(numeroItem);
}

O console.log(numeroItem) retorna o <strong> da seguinte maneira:

Screenshot to console do safari após enviar o formulário com quantidade = 1e eu não consigo visualizar os parâmetros dentro dele. No meu caso eu estou utilizando o safari.

1 resposta

Olá Bruna, tudo bom?

A constante numeroItem é justamente um item html criado com o javascript. Ou seja, no console irá aparecer as tags strong referentes a esse item.

Agora voltando um pouco no evento em si que você comentou, adicione um console.log logo depois do evento.preventDefault().

form.addEventListener("submit", (evento) => {
    evento.preventDefault()
    console.log("evento", evento)
    criaElemento(evento.target.elements['nome'].value, evento.target.elements['quantidade'].value)
})

Nesse caso você vai ver tudo o que é carregado ao gerar o "submit" Indo um pouco mais além, colocando console.log("evento", evento.target") Você pode observar que é carregado o formulário como um todo e que depois quando avançamos para elements, no console vão aparecer diversas propriedades. Você buscando a propriedade value nos (...) pontos deve encontrar o que você digitou para adicionar na mochila