為什么在呼叫文本輸入的變數時 console.log 回傳一個空行。
HTML
<label for="subject">Subject</label>
<input type="text" id="subject" name="ticket-subject" />
Javascript
我嘗試了實際的表單，它console.log在提交時完美運行，但不知何故，值ticketSubject似乎是空的。
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')
})
這是主題欄位：
但它什么也不回傳：
uj5u.com熱心網友回復：
您在頁面首次加載時立即讀取輸入的值，在用戶有機會輸入值之前。改為讀取submit事件處理程式中的值：
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>uj5u.com熱心網友回復：
您需要讀取addEventListener()處理程式內部的值，否則該值存盤在事件之前并且永遠不會顯示在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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446189.html
標籤：javascript html 形式