Cálculos automáticos

Jones Gabriel · 4 de junho de 2016

Boa tarde, galera, sou novo aqui no fórum e to com uma pequena dúvida.

To criando um site para um amigo meu e nele eu to colocando a medida automática de metro². será um site de venda de adesivos e essas coisas.

tenho esse código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>

<link rel="stylesheet" type="text/css" href="teste.css">

</head>
<body>
<div class="table-prod">
<div class="form">

<div class="text-menu">
Banner
</div>
<form id="teste" name="teste" action="teste.php" method="post">

Largura (m): <input class="input-text" type="text" id="largurabanner" name="largura" onkeyup="calculabanner()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"  />

  x Altura (m):
 <input type="text" class="input-text" id="alturabanner" name="altura" onkeyup="calculabanner()" style="width:55px" value="Ex 1.5" onfocus="this.value='';" />
 
 
 <div id="mostra1"></div>
 
 
</form>

</div></div>







<br><br>

<div class="table-prod">

<div class="form">
<div class="text-menu">
Lona
</div>
<form id="teste" name="teste" action="teste.php" method="post">

Largura (m): <input class="input-text" type="text" id="larguralona" name="largura" onkeyup="calculalona()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"/>

  x Altura (m):
 <input type="text" class="input-text" id="alturalona" name="altura" onkeyup="calculalona()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"/>
 
 
 <div id="mostra"></div>
 
 
</form>

</div></div>








<br><br>

<div class="table-prod">
<div class="form">
<div class="text-menu">
Placa
</div>
<form id="teste" name="teste" action="teste.php" method="post">

Largura (m): <input class="input-text" type="text" id="larguraplaca" name="largura" onkeyup="calculaplaca()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"  />

  x Altura (m):
 <input type="text" class="input-text" id="alturaplaca" name="altura" onkeyup="calculaplaca()" style="width:55px" value="Ex 1.5" onfocus="this.value='';" />
 
 
 <div id="mostra2"></div>
 
 
</form>


</div></div>

<script type="text/javascript" src="valores.js"></script>
<script type="text/javascript" src="resultados.js"></script>


</body>
</html>

Tenho os java.

// JavaScript Document



valorpormetro=12.00;
function calculaplaca(){
    var l=parseInt(document.getElementById('larguraplaca').value,10)||0,
    a=parseInt(document.getElementById('alturaplaca').value,10)||0,
    valor=(l*a*valorpormetro*100)+'';
    valorformatado=valor.substr(0,valor.length-2)+','+valor.substr(valor.length-2,2);
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra2').innerHTML="Total: "+l*a+"m² - R$ "+valorformatado;
    
    
};


valorpormetro=32.00;
function calculabanner(){
    var l=parseInt(document.getElementById('largurabanner').value,10)||0,
    a=parseInt(document.getElementById('alturabanner').value,10)||0,
    valor=(l*a*valorpormetro*100)+'';
    valorformatado=valor.substr(0,valor.length-2)+','+valor.substr(valor.length-2,2);
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra1').innerHTML="Total: "+l*a+"m² - R$ "+valorformatado;
    
    
};


valorpormetro=62.00;
function calculalona(){
    var l=parseInt(document.getElementById('larguralona').value,10)||0,
    a=parseInt(document.getElementById('alturalona').value,10)||0,
    valor=(l*a*valorpormetro*100)+'';
    valorformatado=valor.substr(0,valor.length-2)+','+valor.substr(valor.length-2,2);
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra').innerHTML="Total: "+l*a+"m² - R$ "+valorformatado;
    
    
}

e resultados

// JavaScript Document



function calculaplaca(){
    var l=parseFloat(document.getElementById('larguraplaca').value.replace(/,/g,"."))||0,
    a=parseFloat(document.getElementById('alturaplaca').value.replace(/,/g,"."))||0,
    valor=Math.round(l*a*valorpormetro*100)+'';
    valorformatado=valor.replace(/(\d{2})$/,",$1"),
    i=valorformatado.length-6;
    while(i>0){
        valorformatado=valorformatado.substr(0,i)+'.'+valorformatado.substring(i,valorformatado.length);
        i-=3;
    }
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra2').innerHTML="Total: "+Math.round(l*a*1000)/1000+"m² - R$ "+valorformatado;
};






function calculabanner(){
    var l=parseFloat(document.getElementById('largurabanner').value.replace(/,/g,"."))||0,
    a=parseFloat(document.getElementById('alturabanner').value.replace(/,/g,"."))||0,
    valor=Math.round(l*a*valorpormetro*100)+'';
    valorformatado=valor.replace(/(\d{2})$/,",$1"),
    i=valorformatado.length-6;
    while(i>0){
        valorformatado=valorformatado.substr(0,i)+'.'+valorformatado.substring(i,valorformatado.length);
        i-=3;
    }
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra1').innerHTML="Total: "+Math.round(l*a*1000)/1000+"m² - R$ "+valorformatado;
};




function calculalona(){
    var l=parseFloat(document.getElementById('larguralona').value.replace(/,/g,"."))||0,
    a=parseFloat(document.getElementById('alturalona').value.replace(/,/g,"."))||0,
    valor=Math.round(l*a*valorpormetro*100)+'';
    valorformatado=valor.replace(/(\d{2})$/,",$1"),
    i=valorformatado.length-6;
    while(i>0){
        valorformatado=valorformatado.substr(0,i)+'.'+valorformatado.substring(i,valorformatado.length);
        i-=3;
    }
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra').innerHTML="Total: "+Math.round(l*a*1000)/1000+"m² - R$ "+valorformatado;
}

até então tudo beleza, eles fazem a leitura, só que todos os campos que eu coloco a numeração ele aparece sempre a do valor de "Calculolona" e os outros de cima ele não mostra nos outros campos.

o CSS.

@charset "utf-8";
/* CSS Document */

.form {
    margin: 0 66px 0 30px;
	font-family:Tahoma, Geneva, sans-serif;
	}

.input-text {
    padding: 15px 16px;
    border: 1px solid #ccc;
    width: 100%;
    height: 7px;
    display: compact;
    border-radius: 4px;
    font-size: 15px;
    color: #aaa;
    margin: 0 0 15px 0;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.input-text:focus {
    border: 1px solid #fff;
    outline: 0;
	color:#090;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.3);
}

.text-menu {
	color:#009;
	font-family:"Times New Roman", Times, serif;
	font-size:36px;
	}
	
.table-prod {
	border: 1px solid #CCC;
	padding: 15px 15px 15px 15px;
	width: 550px;
}

Aguardo um retorno galera, obrigado desde já.

DiF · 6 de junho de 2016

@Jones Gabriel Olá

poderia dar mais informações?

Por exemplo qual é a fórmula de cálculo que estás usando, olhando para seus códigos parece um tanto confuso. podemos reduzir isso. Mas precisamos das informações.

Como por exemplo o valor do metro, altura e largura... e a formúla para encaixar os dados.

Com jQuery você faz isso tudo com menos linhas!