Pesquisar na Comunidade
Mostrando resultados para as tags ''custos''.
Encontrado 1 registro
-
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?
