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

adiconando o item cor

Olá. Como desafio da aula um estou tentado adicionar um campo de cores aos elementos da mochila.

Na teoria tudo parece bem, mas na prática eu não consigo fazer com que cor e nome sejam computados separademente, gerando esse resultado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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['cor'].value, evento.target.elements['quantidade'].value);
})

function criaElemento(nome, cor, quantidade){

    const novoItem = document.createElement("li");
    novoItem.classList.add("item");

    const corItem = document.createElement("cor");
    corItem.innerHTML = cor;

    const numeroItem = document.createElement("strong");
    numeroItem.innerHTML = quantidade;

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

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

Como resolver isso?

2 respostas
solução!

Bom dia Ana,

No trecho:


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

// Altere DE:
novoItem.innerHTML += nome + cor;

// PARA: 
novoItem.innerHTML += nome + ' ' + cor;

Funcionando :)

Obrigado.