2

estoy haciendo una calculadora en la cual rellenas los campos y hace las operaciones, pero como hago para que, si el input no tiene ningun valor, javascript lo interprete como 0?

var button = document.getElementsByTagName("input")[2];
var input1 = document.getElementsByTagName("input")[1];
var input2 = document.getElementsByTagName("input")[0];


button.addEventListener("click", function(){
  console.log(input1.valueAsNumber + input2.valueAsNumber);
});
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>Calculadoras</title>
</head>
<body>
        <form action="">
                <input type="number" step="0.001">
                <input type="number" step="0.001">
                <input type="submit" value="sumar">
        </form>
</body>
<script src="./JavaScript/index.js"></script>
</html>

6 respuestas 6

2

Lo que tenés que hacer es reconocer en el evento submit() el input y en caso de estar vacío, reemplazarlo por 0. Podés consultar si es un número mediante Number.isNaN().

var input1 = document.getElementsByTagName("input")[1];
var input2 = document.getElementsByTagName("input")[0];
var form = document.getElementById('formulario');

form.addEventListener('submit', function(e) {
  if (Number.isNaN(input1.valueAsNumber)) {
    input1.value = 0;
  }
  if (Number.isNaN(input2.valueAsNumber)) {
    input2.value = 0;
  }
  console.log(input1.valueAsNumber + input2.valueAsNumber);
  
  //prevengo que se submitee, sólo para el ejemplo
  e.preventDefault();
})
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>Calculadoras</title>
</head>
<body>
        <form id="formulario" action="">
                <input type="number" step="0.001">
                <input type="number" step="0.001">
                <input type="submit" value="sumar">
        </form>
</body>
<script src="./JavaScript/index.js"></script>
</html>

1

Que tal debes usar el operador ternario ?, espero te sirva.

 var button = document.getElementsByTagName("input")[2];


button.addEventListener("click", function(){

var input1 = (document.getElementsByTagName("input")[1].value == "")? 0:document.getElementsByTagName("input")[1].value ;
var input2 = (document.getElementsByTagName("input")[0].value ==  "")? 0:document.getElementsByTagName("input")[0].value;

 
  console.log(input1*1 + input2*1);
});
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>Calculadoras</title>
</head>
<body>
        <form action="">
                <input type="number" step="0.001">
                <input type="number" step="0.001">
                <input type="submit" value="sumar">
        </form>
</body>
<script src="./JavaScript/index.js"></script>
</html>

1

Básicamente necesitas saber si los valores ingresados corresponden a números válidos, y en este caso si se deja el input vacío NO ES UN NÚMERO, debes validarlo con la función isNaN de Javascript

var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var button = document.getElementById("btn");

button.addEventListener("click", function(e){
  if(isNaN(parseInt(input1.value)) || isNaN(parseInt(input2.value))){
    alert('Ingrese ambos números')
  }
  else{
    alert(parseInt(input1.value) + parseInt(input2.value));    
  }
  e.preventDefault();
});
<form action="">
  <input id="input1" type="number" placeholder="Ingrese un número" step="0.001">
  <input id="input2" type="number" placeholder="Ingrese un número" step="0.001">
  <input id="btn" type="submit" value="sumar">
</form>
<script src="./JavaScript/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Si observas coloque a cada elemento del DOM un id, pero es netamente por costumbre propia; de la forma que obtienes los valores (getElementsByTagName) también es válido colega!

Saludos!

0

Con uso de jQuery lo puedes hacer muy sencillo... asi:

       var input2 =  $("input["+0+"]").val().length;

       if (input2 <= 0) {  
          input2=0;   
        }
0

solamente con agregar un value 0

var button = document.getElementsByTagName("input")[2];
var input1 = document.getElementsByTagName("input")[1];
var input2 = document.getElementsByTagName("input")[0];


button.addEventListener("click", function(){
  console.log(input1.valueAsNumber + input2.valueAsNumber);
});
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>Calculadoras</title>
</head>
<body>
        <form action="">
                <input type="number" step="0.001" value=0>
                <input type="number" step="0.001" value=0>
                <input type="submit" value="sumar">
        </form>
</body>
<script src="./JavaScript/index.js"></script>
</html>

4
  • eso no me gusta ya que cada vez que quiera ingresar un valor tendre que borrar el 0, alguna otra manera?
    – Mu-coder
    el 14 ago. 2018 a las 20:14
  • la que te puse =?
    – srJJ
    el 14 ago. 2018 a las 20:16
  • si establezco en el html el valor como 0, cada vez que haga click en el input para introducir un valor voy a tener que borrar ese 0 y no quiero eso, quiero que se muestre vacio el input pero que si no tiene nada se interprete como 0
    – Mu-coder
    el 14 ago. 2018 a las 20:19
  • si es asi solo agregale un placeholder y en el placeholder ponle 0 si lo unico que quieres es mostrar un cero
    – andy gibbs
    el 15 ago. 2018 a las 13:06
-1

null y la cadena vacía son conceptualmente iguales a cero cuando se tratan como una entidad de tipo Number. La solución más sencilla que se me ocurre es:

Suponer que la variable input es el elemento HTML del input a comprobar (puedes obtenerla con document.querySelector, por ejemplo):

var number = Number(input.value)

if (Number.isNaN(number)) {
    // El input en cuestión contenía un valor inválido, como "patata".
} else {
    // El input en cuestión contenía un valor válido. Si input.value es null o "", Number(input.value) es igual a cero. Ahora la variable number contiene el valor deseado.
}

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.