表單幫助(HTML/JS)

Question

我是 web 開發的（非常）新手，目前正在學習后端。

我試圖弄清楚如何在表單中使用多個輸入，但我正在努力獲取實際輸入，而不是使用此代碼創建表單的元素本身：

<form id="newPostForm">
  <input name="titleInput" placeholder="title"><br>
  <input name="bodyInput" placeholder="body">
  <button>Submit</button>
</form>

這個 JS 嘗試和 output 用戶輸入到控制台：

const newPost = document.getElementById("newPostForm")
const title = document.querySelector(".titleInput")
const body = document.querySelector(".bodyInput")

newPost.addEventListener("submit", (e) => {
    e.preventDefault()
    console.log(title, Body)
})

當我點擊提交按鈕時，控制台顯示null null 。 這可能是一個超級簡單的問題，但我會很感激任何幫助。

Answer 1

在用你的body變量修復 case 問題后，你需要通過訪問它們的value屬性來獲取輸入的值。 然后你想將這些變量移動到你的提交處理程序中，否則你只會在頁面加載時獲得一次值，並且它們是空白的：

 const newPost = document.getElementById("newPostForm"); newPost.addEventListener("submit", (e) => { const title = document.querySelector(".titleInput").value; const body = document.querySelector(".bodyInput").value; e.preventDefault() console.log(title, body) })

 <form id="newPostForm"> <input name="titleInput" class="titleInput" placeholder="title"><br> <input name="bodyInput" class="bodyInput" placeholder="body"> <button>Submit</button> </form>