!variable not working in javascript

Question

I have a javascript: bookmarklet with the code

javascript:document.body.contentEditable = !document.body.contentEditable; 

which should switch on and off an "editor" for the page (just for pranks on friends and such). But it does not acheive the desired outcome, nothing happens when I click the bookmark. Opening up the Javascript Console, I see that:

document.body.contentEditable
  "false"
!document.body.contentEditable
  false

Previously, I used javascript:document.body.contentEditable = true; and this makes the page editable but I cannot turn it off.

Answer 1

Like you probably noticed in the JavaScript Console, document.body.contentEditable is a String, not a Boolean. You can do this instead:

document.body.contentEditable = !(document.body.contentEditable == "true");

or just

document.body.contentEditable = document.body.contentEditable != "true";

The HTMLElement.contentEditable property is used to indicate whether or not the element is editable. This enumerated attribute can have the following values:

• "true" indicates that the element is contenteditable.
• "false" indicates that the element cannot be edited.
• "inherit" indicates that the element inherits its parent's editable status.

https://developer.mozilla.org/en/docs/Web/API/HTMLElement/contentEditable