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!