3

Tengo este codigo en html que es básicamente 3 cajas de texos y 4 botones con las operaciones matemáticas:

<body>
<h2>Esta es una practica de JavaScript</h2>  
<p>¿Que operacion matematica, Quieres realizar?</p> 
<p>Digijite el primer numero</p>
<input type="text" name="numero1" id="numerito1">
<br>
<br>
<p>Digijite el segundo numero</p>
<input type="text" name="numero2" id="numerito2">
<br>
<br> 
<input type="button" value="Suma" id="sumita">
<input type="button" value="Resta" id="restita">
<input type="button" value="Multiplicacion" id="multiplicacioncita">
<input type="button" value="Division" id="divisioncita">
<br>
<br>
<p>El resultado es:</p>
<input type="text" name="numero_final" id="numerito_final">
<script src="operaciones.js">  </script>

En js tengo ya la funciones de cada operación y funcionan cuando oprimo el boton me lanza un alert diciendo el resultado pero quiero que aparezca en la caja de texto donde dice el resultado es:

var numero1_js = document.getElementById("numerito1");
var numero2_js = document.getElementById("numerito2");
var numero3_js = document.getElementById("numerito_final");
var sumita_js = document.getElementById("sumita");
var restita_js = document.getElementById("restita");
var multiplicacioncita_js = document.getElementById("multiplicacioncita");
var division_js = document.getElementById("divisioncita");

sumita_js.addEventListener("click", sumar,);
restita_js.addEventListener("click", resta,);
multiplicacioncita_js.addEventListener("click", multiplicacion,);
division_js.addEventListener("click", division,);

function sumar(){
 var n1 = parseInt(numero1_js.value);
 var n2 = parseInt(numero2_js.value);
 var numero3_js = n1 + n2;
 alert("El resultado es " + numero3_js);
}
function resta(){
    var n1 = parseInt(numero1_js.value);
    var n2 = parseInt(numero2_js.value);
    var numero3_js = n1 - n2;
    alert("El resultado es " + numero3_js);
   }

   function multiplicacion(){
    var n1 = parseInt(numero1_js.value);
    var n2 = parseInt(numero2_js.value);
    var numero3_js = n1 * n2;
    alert("El resultado es " + numero3_js);
   }

   function division(){
    var n1 = parseInt(numero1_js.value);
    var n2 = parseInt(numero2_js.value);
    var numero3_js = n1 /n2;
    alert("El resultado es " + numero3_js);
   }
1
  • Que tal, bueno, en el addEventListener como segundo parámetro usas las funciones que has hecho, pero estan mal escritas... seria: sumar(), y tienes que sacar las comas que están al final el 5 feb. 2019 a las 4:52

2 respuestas 2

1

Para poder pasar el valor de cualquiera de las funciones al input, debes usar el objeto value

Te dejo el ejemplo de como debe verse tu función suma pero es la misma lógica a aplicar para todas las demás que tienes en tu script

Función suma

sumita_js.addEventListener("click", function(){
   var n1 = numero1_js.value
   var n2 = numero2_js.value
   var numero3_js = parseInt(n1) + parseInt(n2)
   document.getElementById("numerito_final").value = numero3_js
})

OBSERVACIONES

  • Pasé dentro del listener como segundo argumento una función anónima que procese la suma
  • Meto dentro del método parseInt() los valores que se van a sumar
  • Obtengo por medio de su id al input que le quiero pasar el valor, de este modo document.getElementById("id")
  • Para poder asignar el valor de la suma al input, al final hago uso de .value=numero3_js

Simplemente replica esto por cada una de tus operaciones que deseas realizar

TU EJERCICIO CON LAS OBSERVACIONES HECHAS

    <h2>Esta es una practica de JavaScript</h2>  
    <p>¿Que operacion matematica, Quieres realizar?</p> 
    <p>Digijite el primer numero</p>
    <input type="text" name="numero1" id="numerito1">
    <br>
    <br>
    <p>Digijite el segundo numero</p>
    <input type="text" name="numero2" id="numerito2">
    <br>
    <br> 
    <input type="button" value="Suma" id="sumita">
    <input type="button" value="Resta" id="restita">
    <input type="button" value="Multiplicacion" id="multiplicacioncita">
    <input type="button" value="Division" id="divisioncita">
    <br>
    <br>
    <p>El resultado es:</p>
    <input type="text" name="numero_final" id="numerito_final">
    <script>
      var numero1_js = document.getElementById("numerito1");
    var numero2_js = document.getElementById("numerito2");
    var numero3_js = document.getElementById("numerito_final");
    var sumita_js = document.getElementById("sumita");
    var restita_js = document.getElementById("restita");
    var multiplicacioncita_js = document.getElementById("multiplicacioncita");
    var division_js = document.getElementById("divisioncita");
    
    sumita_js.addEventListener("click", function(){
       var n1 = numero1_js.value
       var n2 = numero2_js.value
       var numero3_js = parseInt(n1) + parseInt(n2)
       document.getElementById("numerito_final").value = numero3_js
    })
      
    restita_js.addEventListener("click", function(){
        var n1 = numero1_js.value
        var n2 = numero2_js.value
        var numero3_js = parseInt(n1) - parseInt(n2)
        document.getElementById("numerito_final").value = numero3_js
    })
    
    
    multiplicacioncita_js.addEventListener("click", function(){
         var n1 = numero1_js.value
         var n2 = numero2_js.value
         var numero3_js = parseInt(n1) * parseInt(n2)
         document.getElementById("numerito_final").value = numero3_js
    })
    
    division_js.addEventListener("click", function(){
         var n1 = numero1_js.value
         var n2 = numero2_js.value
         var numero3_js = parseInt(n1) / parseInt(n2)
         document.getElementById("numerito_final").value = numero3_js
    })
    
    </script>

1

Propongo esta solución, aunque creo que se podría realizar de una manera más limpia este ejercicio.

            // Te recomiendo que definás tus variables de esta manera numeroUnoJs
            // Si revisás documentación o métodos en javascript es minúsula mayúscula al igual que las funciones 
            var numero1_js = document.getElementById('numerito1');
            var numero2_js = document.getElementById('numerito2');
            var numero3_js = document.getElementById('numerito_final');
            var sumita_js = document.getElementById('sumita');
            var restita_js = document.getElementById('restita');
            var multiplicacioncita_js = document.getElementById('multiplicacioncita');
            var division_js = document.getElementById('divisioncita');
    
            sumita_js.addEventListener('click', sumar);
            restita_js.addEventListener('click', resta);
            multiplicacioncita_js.addEventListener('click', multiplicacion);
            division_js.addEventListener('click', division);
            function sumar() {
                // si es que necesitaras definir cada variable en las funciones utiliza let (local), var es global
                let n1 = parseInt(numero1_js.value);
                let n2 = parseInt(numero2_js.value);
                let numero3_js = 0
                numero3_js = n1 + n2;
                // Para definirlo en tu elmento numero_final es sencillo haz lo mismo que hiciste para obtener
                document.getElementById('numerito_final').value = numero3_js;
                //alert('El resultado es " + numero3_js);
            }
            function resta() {
                let n1 = parseInt(numero1_js.value);
                let n2 = parseInt(numero2_js.value);
                let numero3_js = 0
                numero3_js = n1 - n2;
                document.getElementById('numerito_final').value = numero3_js;
                //alert('El resultado es " + numero3_js);
            }
    
            function multiplicacion() {
                let n1 = parseInt(numero1_js.value);
                let n2 = parseInt(numero2_js.value);
                let numero3_js = 0
                numero3_js = n1 * n2;
                document.getElementById('numerito_final').value = numero3_js;
                //alert('El resultado es " + numero3_js);
            }
    
            function division() {
                let n1 = parseInt(numero1_js.value);
                let n2 = parseInt(numero2_js.value);
                let numero3_js = 0
                numero3_js = n1 / n2;
                document.getElementById('numerito_final').value = numero3_js;
                //alert('El resultado es " + numero3_js);
            }
    <body>
        <h2>Esta es una practica de JavaScript</h2>
        <p>¿Que operacion matematica, Quieres realizar?</p>
        <p>Digijite el primer numero</p>
        <input type="text" name="numero1" id="numerito1">
        <br>
        <br>
        <p>Digijite el segundo numero</p>
        <input type="text" name="numero2" id="numerito2">
        <br>
        <br>
        <input type="button" value="Suma" id="sumita">
        <input type="button" value="Resta" id="restita">
        <input type="button" value="Multiplicacion" id="multiplicacioncita">
        <input type="button" value="Division" id="divisioncita">
        <br>
        <br>
        <p>El resultado es:</p>
        <input type="text" name="numero_final" id="numerito_final">
    

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.