Editing dynamically created text in Javascript

Question

I'm creating a "social media comment section" (you can add your own comments by typing in a comment box at the bottom.) I want to add an edit button which can change as to what ever comment the edit button was clicked on. I am very unfamiliar with how do to do this. I've tried adding a click function that creates a text box where you can put text into but it creates the text box on every comment that has an edit button. How can I make the "Edit" button more specific to which ever comment was clicked?

 $(document).ready(function(){ let value; let storeValues = [] let storeValueName; let storeValueComment; $('#addComment').click(function(){ storeValueName = getName(); storeValueComment = getComment(); storeValues.push(storeValueName); storeValues.push(storeValueComment); value = getName() + getComment(); function getName(){ let grabName; $('#name').val(function(i, v){ grabName = v; }) return grabName; } function getComment(){ let grabComment; $('#bodyText').val(function(i, v){ grabComment = v; }) return grabComment } console.log(storeValues); $('.eachComment').prepend('<div class="comments">' +'<img class="imgClass" src="userImage.jpg">'+'<p class="nameVal">' + storeValueName +'</p>' + '<p class="commentVal">'+ storeValueComment +'</p>'+ '<input type="button" id="edit" value="Edit" />'+ '<input type="button" id="delete" value="Delete" />' + '</div>'); $('#edit').click(function(){ }) }) })

 body{ background-color: #E5E5E5 } #wholeForm{ margin: 0 auto; width: 800px; height: 400px; position: relative; background-color: #D3D3D3; font-family: helvetica; } #question{ padding: 0px; margin: 0px; width: 780px; height: 75px; background-color: white; padding:10px; } #nameOfPerson{ font-size:13px; margin: 0; padding: 0; } #commentOfPerson{ font-size:25px; font-weight: bold; margin: 0; padding: 0; }.form2{ width: 800px; height: 458px; }.comments{ background-color: white; width: 780px; height: 75px; position: relative; margin: 10px; }.form1{ padding:20px; margin-bottom: 10px; width: 758px; position: absolute; bottom: -10px; background-color: white; } #addComment{ display: inline-block; margin-left: 35px; } #name{ width: 125px; } #bodyText{ width: 500px; }.formInput{ display: inline-block; }.nameVal{ display: inline-block; font-size: 12px; position: absolute; }.commentVal{ display: inline-block; position: absolute; font-weight: bold; font-size: 18px; bottom: 5px; }.imgClass{ display: inline-block; height: 65px; width: 65px; margin: 5px; } #edit{ position: absolute; right:55px; border: none; text-decoration: underline; color:#30D5C8; background-color:white; margin:5px; } #delete{ position: absolute; right:0px; border: none; text-decoration: underline; color:#30D5C8; background-color:white; margin:5px; } #edit:hover{ color:#DDA0DD } #delete:hover{ color:#DDA0DD }

 <.DOCTYPE html> <html> <head> <title></title> <link href='style?css' type='text/css' rel='stylesheet' /> </head> <body> <div id='wholeForm'> <div id="question"> <p id="nameOfPerson">WhySoSerious45</p> <p id="commentOfPerson">Trying to decide a career path. Programming is the move. Change my mind.</p> </div> <div class='form2'> <div class='eachComment'> <div class="comments"> <img class="imgClass" src="userImage?jpg"> <p class="nameVal">Jonny R</p> <p class="commentVal">I wish I knew how to program: Maybe ill start learning.</p> <input type="button" id="edit" value="Edit"> <input type="button" id="delete" value="Delete"> </div> </div> </div> <div class='form1'> <div class='formInput'> <input type="text" id="name" placeholder="Display Name"/> <input type='text' id="bodyText" placeholder="Comment"></textarea> </div> <input type="button" id="addComment" value="Submit"> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html>

Answer 1

To answer your question in a general sense…

When you add an event listener, the specific element will show up on the event's target property. So, if we had something like this:

<div class="posts">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

We could actually add a click handler to the div, because events "bubble" up to it.

document.querySelector('.posts').addEventListener('click' (e) => {
  console.log(e.target.textContent); // Button 1, Button 2, etc.
});

Editing dynamically created text in Javascript

Question

1 answers

solution1
1 ACCPTED 2022-11-30 05:24:58

Editing dynamically created text in Javascript

Question

1 answers

solution1 1 ACCPTED 2022-11-30 05:24:58

solution1
1 ACCPTED 2022-11-30 05:24:58