如何在 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> 并向其添加事件侦听器（而不是表单）。然后你可以select输入标签的值，当用户点击提交按钮

时将它插入评论div

Answer 2

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

在 JavaScript 代码中，您忘记在倒数第二行添加小括号，这就是为什么它通过错误
在Html中需要给Input字段添加name属性，否则submit的监听器总是returnundefined

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

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;
  })
})

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

How to Display User Input (composed of a few submissions) in JavaScript?

javascript

forms

submission