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á.

Entrar

Jones Gabriel

Posts

Cadastrado em

Última visita

Tipo de conteúdo

Artigos

Selos

Fabricantes

Livros

Cursos

Análises

Fórum

posts postados por Jones Gabriel

Cálculos automáticos

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos