Neste exemplo apresento como buscar informações na página e retorná-las após o click no botão, mas sem direcioná-la para uma outra pagina.
Comandos relacionados que você deve estudar mais:
document.getElementById("nomeDoElementoAqui").innerHTML
fique atento aos caracteres. MAIUSC e minusc tem diferença no nome.
====================================================
<html>
<head>
<title>Cálculo do Salário</title>
<style type="text/css">
body{
margin:50px;
background:#4682B4;
}
.minhaDIV, .divInterna{
padding:10px;
border-radius:10px;
width:600px;
left:50%;
margin-left:300px;
height:relative;
color:blue;
background:silver;
box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);
}
.divInterna{
width:400px;
left:50%;
margin-left:100px;
}
.botao{
border-radius:2px;
}
</style>
<script type="text/javascript">
//função para calcular o salario
function calcularSalario(){
var funcion = document.getElementById("funcionario").value;
var salario = document.getElementById("salario").value;
var desconto = 10;
var liquido =salario - (salario*(desconto/100));
document.getElementById("respostaNome").innerHTML =funcion;
document.getElementById("respostaSalario").innerHTML = salario;
document.getElementById("respostaDesconto").innerHTML = desconto;
document.getElementById("respostaLiquido").innerHTML = liquido;
// avalia salario
if (salario>=1000){
document.getElementById("respostaCor").innerHTML="<font color=red><b>Salário acima de 1000</b></font>";
}else{
document.getElementById("respostaCor").innerHTML="<font color=navy><b>Salario abaixo de 1000</b></font>";
}
}
//funcao para limpar os campos
function limparCampos(){
document.getElementById("respostaNome").innerHTML ='';
document.getElementById("respostaSalario").innerHTML =" ";
document.getElementById("respostaDesconto").innerHTML =" ";
document.getElementById("respostaLiquido").innerHTML =" ";
document.getElementById("funcionario").value=" ";
document.getElementById("salario").value=" ";
document.getElementById("respostaCor").innerHTML=" ";
}
</script>
</head>
<body>
<div class="minhaDIV">
<form name="cadastro">
Funcionário
<br>
<input type="text" id="funcionario" name="funcionario">
<br>
Salario
<br>
<input type="text" id="salario" name="salario">
<br>
<input class="botao" type="button" name="calcular" value="calcular" onclick="calcularSalario();">
<input class="botao" type="button" name="limpar" value="limpar" onclick="limparCampos();">
<br>
</form>
</div>
<br>
<br>
<br>
<div class="minhaDIV">
<p>Resposta dos Cálculos</p>
<table width=450px>
<tr>
<td>Nome:</td>
<td>Salario:</td>
<td>Desconto:</td>
<td>liquido:</td>
<tr>
<tr>
<td><h4 id="respostaNome"></h4></td>
<td><h4 id="respostaSalario"></h4></td>
<td><h4 id="respostaDesconto"></h4></td>
<td><h4 id="respostaLiquido"></h4></td>
<tr>
</table>
<br>
<div id="ApresentaCorSalario" class="divInterna">
<p>Apresentação da Análise do Salário.</p>
<p id="respostaCor"></p>
</div>
</div>
<br>
<br>
<br>
<div class="minhaDIV">Todos os direitos reservados.</div>
</body>
</html>
Comandos relacionados que você deve estudar mais:
document.getElementById("nomeDoElementoAqui").innerHTML
fique atento aos caracteres. MAIUSC e minusc tem diferença no nome.
====================================================
<html>
<head>
<title>Cálculo do Salário</title>
<style type="text/css">
body{
margin:50px;
background:#4682B4;
}
.minhaDIV, .divInterna{
padding:10px;
border-radius:10px;
width:600px;
left:50%;
margin-left:300px;
height:relative;
color:blue;
background:silver;
box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);
}
.divInterna{
width:400px;
left:50%;
margin-left:100px;
}
.botao{
border-radius:2px;
}
</style>
<script type="text/javascript">
//função para calcular o salario
function calcularSalario(){
var funcion = document.getElementById("funcionario").value;
var salario = document.getElementById("salario").value;
var desconto = 10;
var liquido =salario - (salario*(desconto/100));
document.getElementById("respostaNome").innerHTML =funcion;
document.getElementById("respostaSalario").innerHTML = salario;
document.getElementById("respostaDesconto").innerHTML = desconto;
document.getElementById("respostaLiquido").innerHTML = liquido;
// avalia salario
if (salario>=1000){
document.getElementById("respostaCor").innerHTML="<font color=red><b>Salário acima de 1000</b></font>";
}else{
document.getElementById("respostaCor").innerHTML="<font color=navy><b>Salario abaixo de 1000</b></font>";
}
}
//funcao para limpar os campos
function limparCampos(){
document.getElementById("respostaNome").innerHTML ='';
document.getElementById("respostaSalario").innerHTML =" ";
document.getElementById("respostaDesconto").innerHTML =" ";
document.getElementById("respostaLiquido").innerHTML =" ";
document.getElementById("funcionario").value=" ";
document.getElementById("salario").value=" ";
document.getElementById("respostaCor").innerHTML=" ";
}
</script>
</head>
<body>
<div class="minhaDIV">
<form name="cadastro">
Funcionário
<br>
<input type="text" id="funcionario" name="funcionario">
<br>
Salario
<br>
<input type="text" id="salario" name="salario">
<br>
<input class="botao" type="button" name="calcular" value="calcular" onclick="calcularSalario();">
<input class="botao" type="button" name="limpar" value="limpar" onclick="limparCampos();">
<br>
</form>
</div>
<br>
<br>
<br>
<div class="minhaDIV">
<p>Resposta dos Cálculos</p>
<table width=450px>
<tr>
<td>Nome:</td>
<td>Salario:</td>
<td>Desconto:</td>
<td>liquido:</td>
<tr>
<tr>
<td><h4 id="respostaNome"></h4></td>
<td><h4 id="respostaSalario"></h4></td>
<td><h4 id="respostaDesconto"></h4></td>
<td><h4 id="respostaLiquido"></h4></td>
<tr>
</table>
<br>
<div id="ApresentaCorSalario" class="divInterna">
<p>Apresentação da Análise do Salário.</p>
<p id="respostaCor"></p>
</div>
</div>
<br>
<br>
<br>
<div class="minhaDIV">Todos os direitos reservados.</div>
</body>
</html>
Nenhum comentário:
Postar um comentário