When I click submit button second time my post duplicates itself

Question

I wanted to make an Instagram-like site with posting availability but something went wrong.

After writing description, choosing file and clicking submit button everything seems to work fine but if I redo this action second time, second post dublicates itself and there are 3 posts.

Then if I choose another criteria for my post and submit it there will be 6 posts. I have no idea what is happening there. You can see it in my snippet code

const loginForm = document.getElementById('login-form');



class Comment {
  constructor({
    comment,
    userName
  }) {
    this.comment = comment;
    this.userName = userName;
  }
}
class Post {
  constructor({
    img,
    description
  }) {
    this.img = img;
    this.description = description;
  }
}
const myPosts = document.querySelector('.hello');
const btn = document.querySelector('.btn5');

const img1 = new Image();
const input1 = document.querySelector('.form-control');

input1.addEventListener("change", function(e) {
  e.preventDefault();

  const textValue = document.querySelector('#exampleText').value;
  // const frame = document.querySelector('.frame')
  const post = new Post({
    img: img1,
    description: textValue
  });

  const reader = new FileReader();
  btn.addEventListener("click", function(e) {
    e.preventDefault();
    reader.onload = function() {
      img1.src = reader.result

      addPost(post);

    }
    reader.readAsDataURL(input1.files[0])


    //////////////////////////////////////////////////////////////////////////////////////////////////////
  })
})

function addPost(post) {
  myPosts.insertAdjacentHTML("afterend",
    `<div class="main_card">
    <div class="card" style="width: 40rem;">
        <div class="simple_text"></div>
        <div class="inner_div">
            <i class="fas fa-heart"></i>
            <img src="${post.img.src}" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
       <span class="heart">
           <i id="btn" class="far fa-heart"></i>
           <i style="font-size: 30px; " class="far fa-comment"></i>
           <i style="font-size: 30px; padding-left: 490px; color: rgb(17, 8, 8);" id="save1" class="far fa-bookmark safe h2"></i>
       </span>
        </div>
        <h5 style="color: black"><span class="clickCount"></span> likes</h5>
        <p>${post.description}</p>
    </div>
</div>`
  )
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="styles.css">

  <script src="https://kit.fontawesome.com/a89a4ef5c6.js" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="d-flex justify-content-center" id="form" method="post">
    <form id="login-form" method="post">
      <div class="mb-3">
        <label for="inpFile" class="form-label">Add a new post</label>
        <input type="file" class="form-control" name="inpFile" id="inpFile">
      </div>
      <div class="mb-3">
        <label for="exampleText" class="form-label">Description</label>
        <input type="text" class="form-control" id="exampleText">
      </div>
      <button style="width: 400px" type="submit" class="btn5 btn-primary">Submit</button>
    </form>
  </div>
  <h1 class="hello d-flex justify-content-center">My posts</h1>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

You have nested event listeners. Move `btn.addEventListener("click", function(e) { ... })` outside the change event listener — mplungjan, Jan 18 '22 at 10:25
Also you may need to delegate to be able to click on newly inserted buttons - if you want to add a llistener to the like button for example — mplungjan, Jan 18 '22 at 10:28

When I click submit button second time my post duplicates itself

0 Answers0