0
149
ViewsRegistro de la consola que devuelve un valor vacío al llamar a la variable del campo de entrada
¿Por qué console.log devuelve una línea vacía cuando solicita una variable de entrada de texto?
HTML
<label for="subject">Subject</label> <input type="text" id="subject" name="ticket-subject" />JavaScript
Probé el formulario real y su console.log funcionó perfectamente en el envío, pero de alguna manera el valor de ticketSubject parece estar vacío.
const ticketForm = document.querySelector('.ticket-form') const ticketSubject = document.getElementById('subject').value; ticketForm.addEventListener('submit', (e)=> { e.preventDefault() console.log(ticketSubject) console.log('The form submit works') })Aquí está el campo de asunto:
Pero no devuelve nada:
·
Juan Pablo Isaza
2 answers
Answer question0
Estás leyendo el valor de la entrada inmediatamente cuando la página se carga por primera vez, antes de que el usuario haya tenido la oportunidad de ingresar un valor. Lea el valor en el controlador de eventos de submit en su lugar:
const ticketForm = document.querySelector('.ticket-form') ticketForm.addEventListener('submit', (e)=> { e.preventDefault() // read the value here const ticketSubject = document.getElementById('subject').value; console.log(ticketSubject) console.log('The form submit works') }) <form class="ticket-form"> <label for="subject">Subject</label> <input type="text" id="subject" name="ticket-subject" /> <input type="submit" value="Submit" /> </form>
·
Juan Pablo Isaza
Report
0
Debe leer el valor dentro del controlador addEventListener() , de lo contrario, el valor se almacena antes del evento y nunca aparecerá en la console.log()
const ticketForm = document.querySelector('.ticket-form') ticketForm.addEventListener('submit', e => { e.preventDefault() console.log(document.getElementById('subject').value); console.log('The form submit works') }) <form class="ticket-form"> <label for="subject">Subject</label> <input type="text" id="subject" name="ticket-subject" /> <button type="submit"> submit</button> </form>
·
Juan Pablo Isaza
Report
Answer question