!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.

http://stackoverflow.com/questions/263965/how-can-i-convert-a-string-to-boolean-in-javascript — Bald Bantha, Apr 22 '16 at 15:25
type this in console when its enabled: `typeof document.body.contentEditable` — GottZ, Apr 22 '16 at 15:25

score 9 · Answer 1 · answered Apr 22 '16 at 15:25

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

score 1 · Answer 2 · answered Apr 22 '16 at 15:26

1

document.body.contentEditable is a string value and JavaScript considers non-empty strings to be truthy.

!"" == true
!"a" == false

answered Apr 22 '16 at 15:26

Jeremy J Starcher

23,369
6
54
74

score 0 · Answer 3 · answered Apr 22 '16 at 15:25

0

The value of contentEditable is a string, not a boolean. It can have the values "true", "false" or "inherit" (therefore it can't be a simple boolean). A boolean inversion won't work. You need to explicitly assign one of these three strings.

answered Apr 22 '16 at 15:25

deceze

510,633
85
743
889

score 0 · Answer 4 · answered Apr 22 '16 at 15:26

0

Is contentEditable a text input? So you need to parse the texto into boolean:

javascript:document.body.contentEditable = !JSON.parse(document.body.contentEditable);

answered Apr 22 '16 at 15:26

Diego Polido Santana

1,425
11
19

score 0 · Accepted Answer · answered Apr 22 '16 at 19:51

deceze is correct here, I (somewhat stupidly) thought that because you do document.body.contentEditable = true;
you could also do
!document.body.contentEditable; but this is not correct.

In the end, I decided to use the property that is actually a boolean, isContentEditable, like so:
document.body.contentEditable = !document.body.isContentEditable;

!variable not working in javascript

5 Answers5