How to trigger just a button in a loop JS

Question

I have 3 buttons with the same class. And when i press one of them i don't want to show all the 3 forms, i want to show just the form on which button was pressed(and i can't have different classes). How can i do it?

 const buttonEdit = document.querySelectorAll(".buttonEdit");
 const formPost = document.querySelectorAll(".formPost");
 
 for (var i = 0; i < buttonEdit.length; i++) {
   buttonEdit[i].addEventListener("click", function(e) {
       for(let form of formPost ){    
         form.style.display = 'block';          
       }  
   });
 }



fetch(URL)
 .then((response) => response.json())
 .then((data) => {
   data.posts.map((post) => {
     const div = document.querySelector(".posts");
     div.innerHTML += `
   <div class="post">
   <button class="buttonEdit" data-id="${post.id}">Edit</button>
   </div>
   <form class="formPost" method="post" action="/admin/edit" >
   <label for="title">Title</label>
   <input type="text" name="title">
   <label for="content">Content</label>
   <input type="text" name="content">
   <label></label>
   <input type="submit" value="Submit">
   </form>
   </div>
   `;
   });
 });

Could you include the relevant HTML as part of the question? — Mamun
– Mamun, Commented Oct 5, 2020 at 12:55
@Alex98 Hard to say without you providing your Html, but if I had to do it based on what you provided, I'd either get the button which was clicked and traverse the DOM in some way to find the form which correlates to the button and show it, else I'd add ids to each button and form and get the id of the button clicked inside the event handler and use a conditional to unhide the correct form. — Ryan Wilson
– Ryan Wilson, Commented Oct 5, 2020 at 12:55
i just need to make a CRUD system, and i am at the Update part. Each post has a Edit button and when a post is clicked a form needs to appear. But when the Edit button is clicked the form appears to all the posts and i dont want this=)) — yaws76
– yaws76, Commented Oct 5, 2020 at 13:04

Mamun · Accepted Answer · 2020-10-05 13:10:07Z

As your HTML stands, you can first target the parent of the clicked button, then use nextElementSibling to get the specific form:

Demo:

const buttonEdit = document.querySelectorAll(".buttonEdit");
const editPost = document.querySelectorAll(".formPost");

for (let i = 0; i < buttonEdit.length; i++) {
 buttonEdit[i].addEventListener("click", function(e) {
   this.parentNode.nextElementSibling.style.display = 'block';  
 });
}

.formPost{
  display: none;
}

<div class="post">
   <button class="buttonEdit" data-id="${post.id}">Edit</button>
</div>
<form class="formPost" method="post" action="/admin/edit" >
  <label for="title">Title</label>
  <input type="text" name="title">
  <label for="content">Content</label>
  <input type="text" name="content">
  <label></label>
  <input type="submit" value="Submit">
</form>
<div class="post">
   <button class="buttonEdit" data-id="${post.id}">Edit</button>
</div>
<form class="formPost" method="post" action="/admin/edit" >
  <label for="title">Title</label>
  <input type="text" name="title">
  <label for="content">Content</label>
  <input type="text" name="content">
  <label></label>
  <input type="submit" value="Submit">
</form>
   
   `

Collectives™ on Stack Overflow

How to trigger just a button in a loop JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related