Dúvidas sobre evento onchange (resolução do Exercício R01)
Pessoal,
Observem dica para o uso do evento onchange em JavaScript.
calculadora.html
<!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>
<title>Untitled Page</title>
<script type="text/javascript" src="calculadora.js">
</script>
</head>
<body onload="configurar()">
<form action="">
<p>
<input id="txtVal1" type="text" />
</p>
<p>
<input id="txtVal2" type="text" />
</p>
<p>
<input id="btMais" type="button" value="+" />
<input id="btMenos" type="button" value="-" />
</p>
<p>
<input id="btVezes" type="button" value="*" />
<input id="btDividido" type="button" value="/" />
</p>
<p>
<select id="slOperacoes" name="D1">
<option>Escolha uma operação</option>
<option>Somar</option>
<option>Diminuir</option>
</select>
<div id="resultado"></div>
</p>
<br>
<br>
</form>
</body>
</html>
calculadora.js
function somar()
{
// val1 reflete o objeto caixa de texto txtVal1
var val1 = document.getElementById("txtVal1");
// val1 reflete o objeto caixa de texto txtVal2
var val2 = document.getElementById("txtVal2");
// Realiza a operação.
var resultado = parseInt(val1.value) +
parseInt(val2.value);
//alert(resultado);
// res reflete a div cujo id é resultado
var res = document.getElementById("resultado");
// escreve o resultado na div
res.innerHTML = resultado;
}
function diminuir()
{
//... Complete com o seu código
}
function operar()
{
// this é a caixa de seleção associada ao evento
switch (this.selectedIndex)
{
case 1:
somar();
break;
case 2:
diminuir();
break;
//...
}
}
function configurar()
{
// Configura o botão, associando a função somar ao clique do botão
var btMais =
document.getElementById("btMais");
btMais.onclick = somar;
// Associa a função operar ao evento onchange do slOperacoes.
// Assim, quando o valor
var slOperacoes =
document.getElementById("slOperacoes");
slOperacoes.onchange = operar;
}
Comentários