简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Edit dynamically created text in Javascript
P粉268654873
P粉268654873 2024-03-31 14:17:41
0
1
365

I'm creating a "Social Media Comments Section" (you can add your own comments by typing in the comment box at the bottom.) I want to add an Edit button that can be changed Click the edit button for any comment. I'm very unfamiliar with how to do this. I tried adding a click function that creates a textbox where you can enter text, but it creates a textbox on every comment that has an edit button. How can I make the Edit button more specific to the comment I clicked on? 

$(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>

P粉268654873
P粉268654873

reply all(1)
P粉593118425
P粉5931184252024-04-01 10:58:52 1 floor

To answer your question in a general sense...

When you add an event listener, the specific element will be displayed on the event's target attribute. So if we have something like this:

We can actually add a click handler to the div because the event "bubbles" up to it. 

document.querySelector('.posts').addEventListener('click' (e) => {
  console.log(e.target.textContent); // Button 1, Button 2, etc.
});
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！