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?