Question

对于一个项目，我正在创建一个注释系统，在该系统中，我使用ajax将注释上载到数据库。要查看数据库中已有的注释，我使用PHP使用两个按钮来打印它们：编辑和删除。这些按钮具有onclicks，它们提供：'action'，'commentId'，'commentTitle'，'entity'，'entityId'。在下面，我打印了几行代码，以便您了解其工作原理。

这是一个评论的网站上印刷的代码。

    <div id="comment95" class="media m-b-20">
    <div class="d-flex mr-3">
        <a href="#">
        <i  ="media-object rounded-circle thumb-sm" alt="64x64" src="/images/avatar.png">
        </a>
    </div>
    <div class="media-body">
        <h5 class="mt-0">Username - 03/12/2019</h5>
        <pre id="commentText95" class="comment">test 2</pre>
        <a href="#" onclick="comment('delete', '95', 'Proof of Concept', 'entity1', '33')" class="text-danger font-13 custom-button mr-2">Delete</a>
        <a id="editBtn95" href="#" onclick="comment('editE', '95', 'Proof of Concept', 'entity1', '33')" class="text-warning font-13 custom-button">Edit</a>
    </div>
</div>

这是我用来使te文本框可编辑的javascript。当用户单击“编辑”时，该框将变为可编辑状态，并且将添加一个类，该类将为文本框提供边框。问题是那行不通。它更改了按钮的innerhtml并添加了类，但在文本框上不起作用。

    case "editE":
    editBtn = document.getElementById("editBtn" + commentId);
    commentTextbox = document.getElementById("commentText" + commentId);

    //makes the selected comment editable
    console.log(commentTextbox);
    commentTextbox.setAttribute("contenteditable", "true");
    commentTextbox.classList.add("comment-textbox-editable");
    editBtn.className = "text-success font-13 custom-button";
    editBtn.setAttribute("onclick", "comment('edit', '" + commentId + "', '" + commentName + "', '" + entity + "', '" + relationId + "')");
    editBtn.innerHTML = "Save";
    editBtn.blur();
    break;
//edit will update the comment when the editE is submitted
case "edit":
    editBtn = document.getElementById("editBtn" + commentId);
    commentTextbox = document.getElementById("commentText" + commentId);
    console.log(commentTextbox);

    //gets the text of the comment textbox and will remove the editability
    commentText = commentTextbox.innerText;
                commentTextbox.removeAttribute("contenteditable");
                commentTextbox.classList.remove("comment-textbox-editable");
                editBtn.className = "text-warning font-13 custom-button";
                editBtn.setAttribute("onclick", "comment('editE', '" + commentId + "', '" + commentName + "', '" + entity + "', '" + relationId + "')");
                editBtn.innerHTML = "Edit";
                editBtn.blur();

此后，评论将上传到数据库。

我很奇怪，我在代码中放置了两个console.logs以检查textbox元素，并在控制台中说它是editbale并添加了类。但是在网站本身上没有任何更改，因此无法正常工作。.The screenshot of the console

有人知道如何解决此问题吗？

SetAttribute contenteditable不起作用

0 个答案: