Aquí está mi código
var form = document.querySelector('form'); var name = form.querySelector('div #name'); form.addEventListener('submit', function(e) { e.preventDefault(); console.log(name.value); // undefined }) <form> <div> <input id="name" /> </div> <div> <input type="submit" id="submit" /> </div> </form> console.log imprime undefined si uso var cuando declaro name . Pero imprime el valor real si uso const en lugar de var .
const name = form.querySelector('div #name'); Supongo que es un problema de elevación, pero no puedo entender por qué está sucediendo. Alguien explique por qué no funciona mientras usa var .
Eso es realmente extraño al principio, pero después de leer otras preguntas:
encontré una solución
Por razones de compatibilidad, el uso de var en un ámbito global asigna una variable como propiedad del objeto de window global. Entonces var name = ... es igual a window.name = ...
window.name es una propiedad especial que solo puede ser una cadena, por lo que var name = form.querySelector('div #name'); convierte el elemento HTML en cadena. Puede verificar esto ejecutando typeof name .
Por lo tanto, no puede acceder a las propiedades del elemento HTML.
Otra razón para usar siempre const o let
El uso de var asigna la variable al objeto de la window y, por lo tanto, es equivalente a:
window.name = form.querySelector('div #name'); y el resultado se convierte en una cadena, y las cadenas no tienen ninguna propiedad, por lo tanto, no están undefined .
const no se asigna a la window ( MDN ), por lo que el name se asigna como elemento.