Prácticas JavaScript: Sumar dos números ingresados por el usuario

Antes de comenzar: esta será la primer entrada de una serie de practicas y ejemplos de programación en javascipt pero desde un principio veremos como interactuar con los elementos del cuerpo del documento de html.

En este ejemplo definiremos dos campos para que el usuario ingrese valores numéricos, los cuales sumaremos e imprimiremos el resultado.

Una forma de incluir javascript en html es usando la etiqueta script.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <input type="text" id="numero1" value="5">
 <input type="text" id="numero2" value="9">
 <script>
  var numero1 = document.getElementById("numero1").value;
  var numero2 = document.getElementById("numero2").value;

  var suma = numero1 + numero2;

  document.writeln(suma);
 </script>
</body>
</html>

Empezamos creando los input de los cuales los atributos que usaremos por ahora solo serán el tipo, que para este ejemplo pueden ser tipo text o number y el id mediante el cual accederemos desde javascipt.
En javascript creamos tres variables, las dos primeras para almacenar los valores de los input, y la tercera para guardar el resultado de la suma.

Obtener los valores de los campos input.

document.getElementById obtiene una referencia del elemento que le indiquemos mediante su id, con value obtenemos el valor del elemento.

document.writeln imprime directamente en el documento.

Con el código anterior obtenemos la suma de los valores de los input pero estos valores ya están dados y lo que nosotros queremos es ingresarlos y obtener la suma.

Para ello crearemos un botón el cual llamara a una función en javascript que se encargara de hacer lo anterior pero cuando nosotros le indiquemos haciendo click sobre el botón.

<body>
 <input type="text" id="numero1" >
 <input type="text" id="numero2" >
 <button onclick="sumar()">Sumar</button>
 <script>
  function sumar(){
   var numero1 = document.getElementById("numero1").value;
   var numero2 = document.getElementById("numero2").value;

   var suma = numero1 + numero2;

   document.writeln(suma);
  }
 </script>
</body>

Con lo anterior hemos conseguido que los valores introducidos sean concatenados, por ejemplo si introducimos 5 y 7 obtendremos 57, cuando lo que deberíamos obtener es 12. Para obtener el valor correcto debemos convertir los valores a enteros como se muestra a continuación.

var suma = parseInt(numero1) + parseInt(numero2);

Por ahora solo podemos hacer una suma a la vez, más adelante veremos que hacer para no reiniciar la página cada vez.

Curioseando en Programación

Buscar este blog

Entrada destacada

Como usar enums en Android, kotlin

Prácticas JavaScript: Sumar dos números ingresados por el usuario

Obtener los valores de los campos input.

Comentarios

Publicar un comentario