Calcular custos

Lucasc5 · Dezembro 5, 2016

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?

Entrar

Calcular custos

Pergunta

Lucasc5

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades