<!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 > </td> <td > </td> </tr> </table> </body> </html>