onclick function 只运行一次

Question

I am using an edit button to edit the posts but when I am clicking the button the onclick function executes and it works perfectly like it edits the post and updates the post content(not from backend). But the problem is when I click the edit button again the onclick function is not running. My HTML code:-

<div class="post">
        <b><a href="{% url 'profile' post.author.id %}">{{post.author}}</a></b>
        <input type="hidden" name="postid" value={{post.id}}>
        <!-- <br><br> -->
        <p>{{post.content}}</p>
        {% csrf_token %}
        <textarea name="edit_content" id="edit_content" cols="50" rows="5"></textarea>
        {% if user.is_authenticated %}
            {% if post.author == user %}
                <button class="edit" onclick="edit(this)">Edit</button>
            {% endif %}                
        {% endif %}
        <p><small class="text-muted">{{post.created_on}}</small></p>

Here textarea display is set to 'none'.

My javascript code:-

function edit(ele){
var parent = ele.parentNode;
console.log(ele.parentNode);
var post = parent.querySelector('p');
var textarea = parent.querySelector('textarea');
var id = parent.querySelector('input');

post.style.display = 'none';
textarea.style.display = 'block';
ele.innerHTML = "Save"; 
ele.id = "save";
ele.disabled = true;
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

textarea.onkeyup = () => {
    if( textarea.value.length > 0){
        ele.disabled = false;
    }
    else{
        ele.disabled = true;
    }
}

var save = document.getElementById('save');
save.onclick = () => {
    fetch("http://127.0.0.1:8000/edit", {
        method : "PUT",
        headers: {'X-CSRFToken': csrftoken},
        body : JSON.stringify({
            "postdata" : textarea.value,
            "id" : id.value
            })
    }).then(() => {
        post.innerHTML = textarea.value;
        // textarea.value = '';
        post.style.display = "block";
        textarea.style.display = "none";
        ele.innerHTML = "Edit";
        save.removeAttribute('id');
    });
}

}

Answer 1

I suggest you keep the two buttons, edit and save, separated and you hide/show one of them according to the current state.

In this demo I slightly rewrote your code so that the initial state is read only showing off the <p> with text content. When you'll press the edit button, the paragraph will be hidden and the textarea with its content will show up giving you the opportunity to edit the text. At the same time the edit/save buttons will flip their visibility so that at this point when you'll press save the reverse action will be performed just after successfully calling the web api.

This way you have two separated elements you can style independently and two different functions for the corresponding click events (save and edit).

As an added bonus this code doesn't deal with ids so that it could scale with multiple posts on the same page. The csrf hidden field would be the only exception.

 function save(target){ const parent = target.parentNode; const post = parent.querySelector('p'); const textarea = parent.querySelector('textarea'); const id = parent.querySelector('input'); const edit = parent.querySelector('button.edit'); const url = "http://127.0.0.1:8000/edit"; const csrftoken = ""; fetch(url, { method: "PUT", headers: { 'X-CSRFToken': csrftoken }, body: JSON.stringify({ "postdata": textarea.value, "id": id.value }) }) //I used finally instead of then to deal with the fact that the api url will fail.finally(() => { post.innerText = textarea.value; post.style.display = "block"; textarea.style.display = "none"; target.style.display = 'none'; edit.style.display = 'block'; }); } function edit(target) { const parent = target.parentNode; const post = parent.querySelector('p'); const textarea = parent.querySelector('textarea'); const id = parent.querySelector('input'); const save = parent.querySelector('button.save'); post.style.display = 'none'; textarea.style.display = 'block'; textarea.value = post.innerText; target.style.display = 'none'; save.style.display = 'block'; }

 button.save{ display: none; cursor: pointer; } button.edit{ display: block; cursor: pointer; } textarea.edit_content{ display: none; }

 <div class="post"> <b><a href="http://bogus">{{post.author}}</a></b> <input type="hidden" name="postid" value={{post.id}}> <p>{{post.content}}</p> <textarea name="edit_content" class="edit_content" cols="50" rows="5"></textarea> <button class="edit" onclick="edit(this);">Edit</button> <button class="save" onclick="save(this);">Save</button> <p><small class="text-muted">{{post.created_on}}</small></p> <input type="hidden" name="csrfmiddlewaretoken" value="bogus"> </div>