Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: condor12 en 12 de Julio 2017, 23:34
-
Quiero hacer una calculadora con 3 inputs, en la que en los que se puedan ingresar 2 números en los 2 primeros y el resultado aparezca en el tercero, pero no logro que me funcione.
El código que he hecho es este:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" type="text/css" href="Estilo.css">
<meta charset="UTF-8">
<title>Calculadora</title>
</head>
<body>
Numero 1 <input id="a" type="Number"/><br>
Numero 2 <input id="b" type="Number"/><br>
Resultado: <input id="r" type="Number"/>
<input type="button" value="suma" onclick="suma()"/>
<input type="button" value="resta" onclick="resta()"/>
<input type="button" value="multiplicacion" onclick="multiplicacion()"/>
<input type="button" value="division" onclick="division()"/>
<script>
function suma() {
var numero1 = document.getElementsById('a').value;
var numero2 = document.getElementsById('b').value;
var resultado = parseInt(numero1) + parseInt(numero2);
document.getElementsById('r').value = resultado;
}
function resta() {
var numero1 = document.getElementsById('a').value;
var numero2 = document.getElementsById('b').value;
var resultado = parseInt(numero1) - parseInt(numero2);
document.getElementsById('r').value = resultado;
}
function multiplicacion() {
var numero1 = document.getElementsById('a').value;
var numero2 = document.getElementsById('b').value;
var resultado = parseInt(numero1) * parseInt(numero2);
document.getElementsById('r').value = resultado;
}
function division() {
var numero1 = document.getElementsById('a').value;
var numero2 = document.getElementsById('b').value;
var resultado = parseInt(numero1) / parseInt(numero2);
document.getElementsById('r').value = resultado;
}
</script>
</body>
</html>
¿que hago mal?
-
Este sección es solo para presentación tenes que pegar en el otro sector de foro.
En cuando tu ejercicios yo resolví usando jquery te voy a pegar un ejemplo si por ahí te sirve de guía.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" type="text/css" href="Estilo.css">
<meta charset="UTF-8">
<title>Calculadora</title>
</head>
<body>
Numero 1 <input id="a" type="Number"/><br>
Numero 2 <input id="b" type="Number"/><br>
Resultado: <input id="r" type="text" readonly="readonly"/>
<input type="button" value="suma" onclick="suma()"/>
<input type="button" value="resta" onclick="resta()"/>
<input type="button" value="multiplicacion" onclick="multiplicacion()"/>
<input type="button" value="division" onclick="division()"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
function suma() {
var numero1 = Number($("#a").val());
var numero2 = Number($("#b").val());
var sumar = numero1 + numero2;
var resultado = $("#r").val(sumar);
}
function resta() {
var numero1 = Number($("#a").val());
var numero2 = Number($("#b").val());
var sumar = numero1 - numero2;
var resultado = $("#r").val(sumar);
}
function multiplicacion() {
var numero1 = Number($("#a").val());
var numero2 = Number($("#b").val());
var sumar = numero1 * numero2;
var resultado = $("#r").val(sumar);
}
function division() {
var numero1 = Number($("#a").val());
var numero2 = Number($("#b").val());
var sumar = numero1 / numero2;
var resultado = $("#r").val(sumar);
}
</script>
</body>
</html>Podes probar cargándole numero y apretar los botones que pusiste y veras que ya calcula dependiendo que botón aprieta cambia de valor. También modifique que el resultado no sea edita-ble.
-
ok disculpas y muchas gracias por su ayuda