contentEditable by class = false not working

Question

I have a button that calls a function when clicked that makes all items with a class editable. It works great. The issue I am having, is I need to remove contentEditable="true" or set it to false because when the user is done editing, the page is exported.

Code to enable editing (works)

function editMode(){
    document.querySelectorAll('.edit').forEach(function(element){
        element.contentEditable = 'true';
    })
}

Code that does not work as expected:

function editOff(){
    document.querySelectorAll('.edit').forEach(function(element){
        element.contentEditable = 'false';
    })
}

The elements with the "edit" class continue to be editable. When the function editOff is called, they should not be editable any longer.

Reference to above script: Javascript contentEditable of certain classes only [closed]

Answer 1

Does this work for you?

Source: source code is from the reference in your question.

function editMode(){
    document.querySelectorAll('.edit').forEach(function(element){
        element.contentEditable = 'true';
    })
}

function editOff(){
    document.querySelectorAll('.edit').forEach(function(element){
        element.contentEditable = 'false';
    })
}

<p class="edit">
abcdefghijklmnop
</p>

<button onclick="editMode()">
Click to edit
</button>

<button onclick="editOff()">
Click to stop edit
</button>