如何在 JavaScript 中显示用户输入（由几个提交组成）？

Question

我无法弄清楚我到底做错了什么，我只会得到错误。

index.html

<div id="user-pets">
</div>

<form id="user-pets-form">
  <input type="text">
  <input type="submit">
</form>

index.js

  document.querySelector("#user-pets")
  const createPetForm = document.querySelector("#user-pets-form")
    
  createPetForm.addEventListener("submit", (e) => {
    e.preventDefault()
    let pet = e.target.input.value
     
    document.querySelector("#user-pets").innerHTML += pet
  }

Answer 1

我建议您将第二个输入更改为<button type="submit">Submit</button> 并将事件侦听器添加到其中（而不是表单）。然后你可以选择输入标签的值，当用户点击提交按钮时将其插入到评论div中

Answer 2

在查看您的代码后，您犯了两个错误让我解释一下，

• 在 JavaScript 代码中，您忘记在倒数第二行添加小括号， 这就是为什么它通过错误
• 在Html中需要在Input字段中添加name属性，否则提交的监听器会一直返回undefined

我为你修改了这两个代码，请看下面

HTML

<div id="user-comments">
</div>

<form id="user-comments-form">
  <input type="text" name="comments">
  <input type="submit">
</form>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  console.log("DOM is loaded")

  document.querySelector("#user-comments")
  const createCommentForm = document.querySelector("#user-comments-form")
    
  createCommentForm.addEventListener("submit", (e) => {
    e.preventDefault()
    let comment = e.target.comments.value;
    document.querySelector("#user-comments").innerHTML += comment;
  })
})