Usei os novos conceitos. Separei a linha total do body e inseri no table, mas minha soma não atualiza qdo insiro um novo convidado. | JavaScript: programando na linguagem da web

ARQUIVO HTML

<head>
    <meta charset="UTF-8">
    <title>CONVIDADOS E SUAS IDADES</title>
    <link rel="icon" href="convidados_idades.jpg" type="image/x-icon">
</head>

<body>
    <header>
        <div class="container">
            <h1 class="titulo">LISTA DE CONVIDADOS</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus Convidados</h2>
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Idade</th>
                    </tr>
                </thead>
                <tbody id="tabela-convidados">
                    <tr class="convidado">
                        <td class="info-nome">Douglas</td>
                        <td class="info-idade">23</td>
                    </tr>

                    <tr class="convidado">
                        <td class="info-nome">Daniel</td>
                        <td class="info-idade">42</td>
                    </tr>

                    <tr class="convidado">
                        <td class="info-nome">Marcos</td>
                        <td class="info-idade">27</td>
                    </tr>

                    <tr class="convidado">
                        <td class="info-nome">Flávio</td>
                        <td class="info-idade">18</td>
                    </tr>

                </tbody>
                <tr class="total">
                    <td class="info-nome">Total das Idades:</td>
                    <td class="total-idades">0</td>
                </tr>
            </table>
        </section>
    </main>

    <section class="container">
<h2 id="titulo-form">Adicionar novo convidado</h2>
<form id="form-adiciona">
    <div class="grupo">
        <label for="nome">Nome:</label>
        <input id="nome" name="nome" type="text" placeholder="digite o nome do convidado" class="campo">
    </div>
    <div class="grupo">
        <label for="idade">Idade:</label>
        <input id="idade" name="idade" type="text" placeholder="digite a idade do convidado" class="campo campo-medio">
    </div>
            <button id="adicionar-convidado" class="botao bto-principal">Adicionar</button>
</form>
    </section>

    <script src="js/calcula-idade.js"></script>
    <script src="js/form.js"></script>

</body>

ARQUIVO CALCULA-IDADE.JS function criaListaDeConvidados() {

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

var convidados = [];

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

    var convidado = {
        nome:  itens[i].querySelector('.info-nome').textContent,
        idade: parseInt(itens[i].querySelector('.info-idade').textContent)
    };

    convidados.push(convidado);
}

return convidados;

}

function calculaTotalDasIdades(convidados) {

var total = 0;

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

    total+=convidados[i].idade;
}

return total;

}

function exibeTotalDasIdades(total) { document.querySelector('.total-idades').textContent = total; }

var convidados = criaListaDeConvidados(); var totalDasIdades = calculaTotalDasIdades(convidados); exibeTotalDasIdades(totalDasIdades);

ARQUIVO FORM.JS var botaoAdicionar = document.querySelector("#adicionar-convidado"); botaoAdicionar.addEventListener("click", function(event){ event.preventDefault();

var form = document.querySelector("#form-adiciona"); var convidado = obtemConvidadoDoFormulario(form);

var convidadoTr = montaTr(convidado);

var tabela = document.querySelector("#tabela-convidados");

tabela.appendChild(convidadoTr);

form.reset();

});

function obtemConvidadoDoFormulario(form) {

var convidado = { nome: form.nome.value, idade: form.idade.value,

}; return convidado; };

function montaTr(convidado) { var convidadoTr = document.createElement("tr"); convidadoTr.classList.add("convidado");

//var nomeTd = montaTd(convidado.nome,"info-nome");
//var idadeTd = montaTd(convidado.idade, "info-idade");

convidadoTr.appendChild(montaTd(convidado.nome,"info-nome"));
convidadoTr.appendChild(montaTd(convidado.idade, "info-idade"));

return convidadoTr; };

function montaTd(dado, classe) { var td = document.createElement("td"); td.textContent = dado; td.classList.add(classe);

return td; }

Fala Paulo,

Tudo bem?

Você pode resolver este problema adicionando o seguinte código no evento do botaoAdicionar:

// Sum idades
    var totalIdades = document.querySelector(".total-idades");
    totalIdades.textContent = +totalIdades.textContent + +form.idade.value;

Segue o código do evento do botaoAdicionar completo:

botaoAdicionar.addEventListener("click", function(event){ 
    event.preventDefault();

    var form = document.querySelector("#form-adiciona"); 
    var convidado = obtemConvidadoDoFormulario(form);
    var convidadoTr = montaTr(convidado);
    var tabela = document.querySelector("#tabela-convidados");
    tabela.appendChild(convidadoTr);

    // Sum idades
    var totalIdades = document.querySelector(".total-idades");
    totalIdades.textContent = +totalIdades.textContent + +form.idade.value;

    form.reset();
});

Bom estudo!

Chegou a hora de transformar