1
resposta

Dúvidas - DOM

Olá Professor! Terminei esse módulo, e por curiosidade e treino, quis colocar tudo em prática. Por isso, criei um código onde pretendo adicionar o nome, cpf, conta, depósito e saque. Na verdade, quero que a pessoa digite todos estes elementos e no final faça uma lista com o acréscimo do depósito e tambem do saque. Fiz uma parte onde consegui que o nome da pessoa fosse adicionado logo abaixo do nome. Gostaria que tudo fosse adicionado abaixo do botão total. Professor, criei este código a título de apredizagem, para tentar aplicar o que aprendi até agora. Agradeceria muito se o senhor me ajudasse nisso!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Nome</h3> <input type="text" data-form-input  id="nome" name="nome" placeholder="digite seu Nome aqui"> 
    <ul class="list" data-list></ul>
    <h3>CPF</h3> <input type="text" id="cpf" name="nome" placeholder="digite seu CPF"> 
    <h3>Conta</h3> <input type="text" id="conta" name="nome" placeholder="digite sua Conta"> 
    <h3>Deposito</h3> <input type="text" id="deposito" name="nome" placeholder="digite seu Depósito"> 
    <h3>Saque</h3> <input type="text" id="saque" name="nome" placeholder="digite seu saque"> <br> <br> <br>

    <button id="bottom" data-form-buttom>Total</button>

<script src="dadosBancos.js"></script>

</body>
</html>
const criarTarefa = (evento) => {
    evento.preventDefault()
    const lista = document.querySelector('[data-list]')
    const input = document.querySelector('[data-form-input]')
    const valor = input.value

    const tarefa = document.createElement('li')
    const conteudo = `<p class = "content">${valor}</p>`

    tarefa.innerHTML = conteudo

    lista.appendChild(tarefa)
    input.value = ""

}

const novaTarefa = document.querySelector('[data-form-buttom]')

novaTarefa.addEventListener('click', criarTarefa)
1 resposta

Fala ai Willian, tudo bem? Nesse caso é melhor tu trabalhar com uma tabela, onde cada nova pessoa você cria uma nova linha com colunas para cada valor do formulário.

O código seria muito próximo do que tu fez, só muda que na onde cria um novo li tu criaria um tr e para cada campo no formulário criaria um td para adicionar na linha e depois adicionar a nova linha no corpo da tabela.

Espero ter ajudado.