1

Tengo una función que comprueba si el valor de input esta vacío, si es así, se asigna un 5 a una variable, si no, el valor del input. Ahora pasa que el getElementById("num").value devuelve <input type="number" class="form-control" id="num" name="num"> , y debería ser su valor, no el tag.

Mi función:

function b(){
    //Comprobación
    if(document.getElementById("num").value === ""){
        let num = 5;
    }
    else{
        let num = document.getElementById("num").value;
    }
    console.log(num); 
}

b()
<input type="number" class="form-control" id="num" name="num">

En cambio, si escribo simplemente:

function a(){
  let num = document.getElementById("num").value;
  console.log(num);
}
a()
<input type="number" class="form-control" id="num" name="num">

Sí que funciona, y le introduce el valor. ¿Alguien sabe a que se debe? Gracias.

0

4 respuestas 4

1

La verdad es una pregunta bastante interesante, y me alegra haber coincidido con ella. Al principio parece impresionante pero investigando un poco en cómo funcionan los ids deja de ser una sorpresa.

Cuando creamos un elemento en el html con un id específico, el elemento estará disponible en nuestro objeto window para toda nuestra web, es decir, que cada vez que declaramos un id, se creará una variable con ese nombre que almacenará una referencia a ese elemento en el html:

console.log(div)
console.log(myInput)

// O de manera equivalente
console.log(window.div)
console.log(window.myInput)
<div id="div"></div>
<input type="text" id="myInput">

Esto, en combinación con el alcance local de let, hacen ese efecto en tu código que puede confundir a más de uno (me incluyo cuando lo vi por primera vez).

Recordemos que una variable let solo existe entre las llaves en las que ha sido declarada. Es decir:

function b(){
    //Comprobación
    if(document.getElementById("num").value === ""){
        let num = 5;  //num solo existe acá, no existe fuera de este bloque
    }
    else{
        //num solo existe acá, no existe fuera de este bloque
        let num = document.getElementById("num").value;
    }
    
    // Este num, se refiere a la variable global que se creó 
    // en window cuando declaraste el elemento con un id
    console.log(num); 
}

document.querySelector("#num").addEventListener('change',b)
<input type="number" class="form-control" id="num" name="num">

Se alinearon los planetas de la confusión porque le pusiste a la variable el mismo nombre que el id, pero si hubieras utilizado otro nombre hubieras obtenido el tan esperado error en estos casos:

function b(){
    //Comprobación
    if(document.getElementById("num").value === ""){
        let n = 5;
    }
    else{
        let n = document.getElementById("num").value;
    }
    console.log(n); 
}

b()
<input type="number" class="form-control" id="num" name="num">

¿Cómo solucionarlo?

Si declaras una variable con let dentro de un bloque if o un bloque else solo existirá en ese ámbito. Declara la variable fuera del bloque para evitar el problema:

function b(){
    let num;
    if(document.getElementById("num").value === ""){
        num = 5;
    }
    else{
        num = document.getElementById("num").value;
    }
    console.log(num); 
}

b()
<input type="number" class="form-control" id="num" name="num">

Aunque quizás ahora que ya sabes la variable que se crea cuando declaras un id en tu código, quieras refactorizar tu código a esto (no recomendado), y seguiría funcionando:

function b(){
    let n;
    if(num.value === ""){
        n = 5;
    }
    else{
        n = num.value;
    }
    console.log(n); 
}

b()
<input type="number" class="form-control" id="num" name="num">

Resumen:

  • Para cada elemento en tu html declarado con un id se creará una propiedad en el objeto windows cuya key es el id y cuyo valor es una referencia al elemento.

  • Las variables declaradas con let tienen alcance local (dentro de las llaves entre las que se declara) y no existen fuera de esas llaves.

0

A que se debe no sabre decirte, pero lo podrías simplificar de la siguiente manera si quieres:

function b() {
    let num = document.getElementById("num").value

    //Comprobación
    if(num == ""){
        num = 5;
    } 
   
    console.log(num); 
}

b()
<input type="number" class="form-control" id="num" name="num" onchange="b()">

0
0

Es que debes asignar un evento, sino, se leerá el valor del input al momento de interpretarse la función.

Debe hacer algo como esto:

function b(){
    //Comprobación
    if(document.getElementById("num").value === ""){
        let num = 5;
    }
    else{
        let num = document.getElementById("num").value;
    }
    console.log(num); 
}

document.querySelector("#num").addEventListener('change',b)
<input type="number" class="form-control" id="num" name="num">

Es bueno recordarte que el valor de un input vacío es valga la redundancia vacío, por lo que en lugar de condicionar asi:

if(document.getElementById("num").value === "")

Debes hacerlo así:

if(document.getElementById("num"))
0

Vale, creo saber el porqué de que no te muestra el 5.

Código JS Y HTML actualizado:

function b(){
    //Comprobación
    if(document.getElementById("num").value === ""){
        var num = 5;
    }
    else{
        var num = document.getElementById("num").value;
    }
    console.log(num); 
}
b()
<input type="number" class="form-control" id="num" name="num">

Cómo te pudiste dar cuenta, lo único que modifiqué fue el let, y por qué te muestra el tag? Bueno, hay cierta diferencia entre usar let a usar var, la diferencia es que con let si que puedes modificarla, pero no re declararla, eso no pasa con var con ella puedes modificar y re declarar la variable. var es más versátil y con ella solucionas el problema. Espero haberte ayudado:D

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.