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.