2
respostas

Erro na tentativa de variar o exercício.

Olá, tentando reproduzir oq foi feito neste capitulo e usando de base esse exercício, criei um código para adicionar mais convidados na lista. Primeiro coloquei alguns inputs no html:

 <form id="formulario">
        <input type="text" name="nome">
        <input type="text" name="idade">
        <input type="submit" name="enviar" id="adicionar-convidado">
    </form>
    <script src="js/ubiraci.js"></script>

E depois fiz o código para adicionar mais elementos:

var itens = document.querySelectorAll('.convidado');

    var totalDasIdades = 0;     //essa parte do código já estava presente no exer

    for(var i = 0; i < itens.length; i++) {

        var idade = itens[i].querySelector('.idade').textContent;
        totalDasIdades += parseInt(idade);
    }

    document.querySelector('.total').textContent = totalDasIdades;


    var botao = document.querySelector("#adicionar-convidado");
    botao.addEventListener("click", function() {

        event.preventDefault();

        var form = document.querySelector("#formulario");

        var convidado = obtemNovoConvidado(form);

        var novoConvidado =  adicionaConvidado(convidado);

        var listaConvidado = document.querySelector("ul");

        listaConvidado.appendChild(novoConvidado);
    form.reset();
    })

function obtemNovoConvidado(form){

    var convidado = {
            nome: form.nome.value,
            idade: form.idade.value
        }
    return convidado;

}

function adicionaConvidado (convidado){
    var novoConvidado = document.createElement("li");
    novoConvidado.classList.add("convidado");


    novoConvidado.appendChild(criaSpan(convidado.nome, "nome"));
    novoConvidado.appendChild(criaSpan(convidado.idade, "idade"));


    return novoConvidado;    
}

function criaSpan(dado, classe){
    var novoSpan = document.createElement("span");
    novoSpan.textContent = dado;
    novoSpan.classList.add(classe)

return novoSpan;

}

Minha dúvida é a seguinte, quando adiciono elementos na lista via inputs, a soma não está sendo feita, continuando com o valor do exemplo (110). Adicionando via HTML direto funciona, mas via JS não. Poderiam me ajudar ? Obrigado, abraço!

2 respostas

Boa tarde, Kadmiell! Como vai?

Ao submeter o formulário alguma mensagem de erro aparece no console do navegador? Se sim, poderia colar ela aqui? Assim poderei tentar te ajudar de forma mais efetiva.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Boa tarde Gabriel, nenhuma mensagem de erro apareceu para mim, a ul é criada com a classe , as spans são criadas dentro dentro dessa ul (todas pegando a classe correta) e os ,value colocados dentro das spans. Imaginei que funcionaria normal por conta desse trecho:

var idade = itens[i].querySelector('.idade').textContent;

Porém a soma não está sendo feita