Ir para conteúdo
Fórum Script Brasil
  • 0

Calcular custos


Lucasc5

Pergunta

Pessoal, preciso fazer um aplicativo em javascript para calcular e mostrar na tela o custo fixo e per capita, e devo permitir que várias pessoas possam ser adicionadas.

O exemplo segue anexado e o meu código até o momento é este:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Aplicativo</title>
        <meta charset="UTF-8" />
        <style>
            body{
                width: 1024px;
            }
            #Adiciona{
                margin-left:2px;
                float: left;
                border: 2px solid #8E9A8E;
            }
            #Aplicativo{
                background-color: #CEEBFF;
                width: 800px;
                border-left: 30px solid #00FF00;
            }
            #Nome{
                margin-left: 10px;
                float: left;
                border: 2px solid #8E9A8E;
            }
            #Produto{
                margin-left: 50px;
                float: left;
                border: 2px solid #8E9A8E;
                width: 120px;
            }
            #Titulo{
                width: 800px;
                float: left;
                background-color: #CEEBFF;
                border-left: 2px solid #000000;
                border-right: 2px solid #000000;
                border-top: 2px solid #000000;
            }
            #Campo{
                width: 800px;
                float: left;
                background-color: #CEEBFF;
                border-left: 2px solid #000000;
                border-right: 2px solid #000000;
            }
            #Novo{
                width: 800px;
                height: 350px;
                float: left;
                background-color: #CEEBFF;
                border-bottom: 2px solid #000000;
                border-left: 2px solid #000000;
                border-right: 2px solid #000000;
            }
            #Nome1{
                margin-left: 15px;
                float: left;
                font-size: 25px;
                font-family: Helvetica, Arial, Sans-Serif;
                margin-top: 10px;
                margin-bottom: 2px;
            }
            #Nome2{
                margin-left: 230px;
                float: left;
                font-size: 25px;
                font-family: Helvetica, Arial, Sans-Serif;
                margin-top: 10px;
                margin-bottom: 2px;
            }
            #Nome3{
                margin-left: 60px;
                float: left;
                font-size: 25px;
                font-family: Helvetica, Arial, Sans-Serif;
                margin-top: 10px;
                margin-bottom: 2px;
            }
            #Valor{
                margin-left: 20px;
                float: left;
                border: 2px solid #8E9A8E;
                width: 130px;
            }
            #CustoFixo{
                margin-left:10px;
                float: left;
                border: 2px solid #8E9A8E;
            }
            #PerCapita{
                margin-left:10px;
                float: left;
                border: 2px solid #8E9A8E;
            }
            #Pessoas{
                float: left;
                clear: left;
                margin-left: 20px;
            }
            #Pessoas > p{
                font-size: 25px;
                font-family: Helvetica, Arial, Sans-Serif;
            }
            #Lista{
                clear: left;
            }
            #CustosFixos{
                float: left;
                margin-left: 200px;
                font-size: 25px;
                font-family: Helvetica, Arial, Sans-Serif;
            }
            #Tabela1{
                position: absolute;
                margin-top: 150px;
                margin-left: 300px;
            }
            #Custospercapita{
                float: left;
                margin-left: 100px;
                font-size: 25px;
                font-family: Helvetica, Arial, Sans-Serif;
            }
            #Tabela2 {
                position: absolute;
                margin-top: 150px;
                margin-left: 300px;
            }
        </style>
    </head>
    <body>
        <div id="Titulo">
            <p id="Nome1">Nome</p>
            <p id="Nome2">Produto</p>
            <p id="Nome3">Valor Un.</p>
        </div>
        <div id="Campo">
            <form name="nomes">
            <div id="Nome" ><label><input name="nome"/></label></div>
            <div id="Adiciona"><input type="submit" value="Adiciona"/></div>
            <div><label><input id="Produto" name="produto"/></label></div>
            <div><label><input id="Valor" name="valor"/></label></div>
            <div><input id="CustoFixo"type="submit" value="Custo Fixo"/></div>
            <div><input id="PerCapita" type="submit" value="Per Capita"/></div>
        </div>
        <div id="Novo">
        <div id="Pessoas">
            <p>Pessoas</p>
            <ul id="Lista"></ul>
        </div>
        <div>
            <p id="CustosFixos">Custos Fixos</p>
            <table id="Tabela1" border="1">
                <tr></tr>
            </table>
        </div>
        <div>
            <p id="Custospercapita">Custos per capita</p>
            <table id="Tabela2" border="1">
                <tr></tr>
            </table>
        </div>
        <script>
            document.nomes.addEventListener("submit", function(evento)
            {
                evento.preventDefault();
                var nome =
                document.nomes.nome.value;
                var eUl = document.getElementsByTagName("ul")[0];
                eUl.innerHTML = '';
                var produto =
                document.nomes.produto.value;
                var eTr = document.getElementsByTagName("tr")[0];
                eTr.innerHTML = '';
                for(var i=1; i<=nome; i++)
                {
                    var eLi = document.createElement("li");
                    eLi.innerText = nome;
                    eUl.appendChild(eLi);
                }
                for(var i=1; i<=produto; i++)
                {
                    var eTd = document.createElement("td");
                    for(var j=1; j<=2; j++){
                    eTd.innerText = produto;
                    eTr.appendChild(eTd);}
                }
                for(var i=1; i<=5; i++)
                {
                    var eTd = document.createElement("td");
                    for(var j=1; j<=2; j++){
                    eTd.innerText = produto;
                    eTr.appendChild(eTd);}
                }
            });
        </script>
        </div>
    </body>
</html>

Não estou conseguindo adicionar mais de 1 pessoa e não consigo fazer com que cada botão sirva para um campo digitado.

Alguém me ajuda?

Sem título.jpg

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...