表单帮助(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>