<!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=iso-8859-1" />
<title>Bruno.utilizando.DOM</title>
<script type="text/javascript">
function calcula(){
	var n1 = document.getElementById('num1').value;
	var n2 = document.getElementById('num2').value
	var op = document.getElementById('select').value;
	resultado = "";
	if(n1 !='' && n2 !=''){
		if(op == "+"){
			resultado = parseInt(n1) + parseInt(n2);
		}else if(op == "-"){
			resultado = n1 - n2;
		}else if(op == "*"){
			resultado = n1 * n2;
		}else if(op == "/"){
			resultado = n1 / n2;
		}
		var msn = document.getElementById('msn');
		msn.innerHTML='Resultado';
		var campo = document.getElementById('campo');
		campo.innerHTML='';
		var result = document.createElement('input');
		result.setAttribute('type','text');
		result.setAttribute('readonly',true);
		result.setAttribute('value',resultado);
		result.setAttribute('id','result');
		result.setAttribute('class','CampoTexto');
		campo.appendChild(result);
	}else{
		msn = document.getElementById('msn');
		msn.innerHTML='ERRO!';
	}
}
function resetForm(){
	document.getElementById('num1').value="";
	document.getElementById('num2').value="";
	texto = document.getElementById('msn');
	texto.innerHTML='';
	re = document.getElementById('campo');
	reInput = document.getElementById('result');
	re.removeChild(reInput);
	
}

</script>
<style>
body{
	background-color:#FFFFFF;
	font-family: verdana, arial;
	font-size:10px;
}
.CampoTexto{
	background-color:#EFEFEF;
	border:1px;
	border-color:#333333;
	font-family: verdana, arial;
	font-size:10px;	
}
.Botao{
	background-color:#FFFFFF;
	border:1px;
	color:#333333;
	border-color:#333333;
	font-family: verdana, arial;
	font-size:10px;
}

</style>
</head>

<body>
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td ><input type="text" name="num1" id="num1" class="CampoTexto" /></td>
      <td >
        <select name="select" id="select" class="CampoTexto" >
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>      </td>
      <td ><input type="text" name="num2" id="num2" class="CampoTexto" /></td>
      <td ><input type="button" name="calcula" value="Calcular" onclick="javascript: calcula()" class="Botao" /></td>
	  <td ><input type="reset" name="reset" id="reset" onclick="javascript: resetForm()" value="Apagar" class="Botao" /></td>
    </tr>
    <tr>
      <td id="msn"></td>
      <td colspan="2" id="campo"></td>
      <td >&nbsp;</td>
      <td >&nbsp;</td>
    </tr>
  </table>
</body>
</html>