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

I can't figure out what exactly am I doing wrong, I only get errors.

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
  }

After Reviewing your code, you have made two mistakes let me explain,

• In JavaScript Code you forgot to add small bracket on second last line, that's why its through error
• In Html you need to add name attribute to Input field, otherwise the listener of submit will always return undefined

I modified both code for you, please have look below

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