Javascript boolean true turns false, false does not turn true

Question

This looks extremely trivial but I am not sure why it is not working.

I am utilizing div's instead of checkboxes for my web application. I am using a javascript feature called "contentEditable" to set a boolean attribute to an HTML div element.

Below is the code to switch the attribute true or false:

$(document).on('click', '.chartPageSensorBox', function () {
    var chartNumber = this.id.charAt(6),
        visibilityIndex = this.id.charAt(9),
        checkBoxToggle = this.id.contentEditable; 

    //the alert below returns default value,  output is: 'true true'
    alert(this.id.contentEditable + " " + checkBoxToggle);

    checkBoxToggle = !checkBoxToggle;

    this.id.contentEditable = checkBoxToggle;

    //the alert output now is: 'false false'
    alert(this.id.contentEditable + " " + checkBoxToggle);

    //The series for the chart successfully turns off because it is false
    allCharts[chartNumber - 1].dyGraph.setVisibility(visibilityIndex, checkBoxToggle);
});

Now the issue is, when I click on the div again, false remains false and never turns back to true, which I do not understand why since the if statement should turn checkBoxToggle to true.

EDIT #1: cleaned up the code, but did not fix the error just to make it more legible for future readers.

EDIT #2: Please see code below. The core issue still persists...

$(document).on('click', '.chartPageSensorBox', function () {
    var chartNumber = this.id.charAt(6),
        visibilityIndex = this.id.charAt(9),
        checkBoxToggle = $(this).prop("contentEditable");

    alert(checkBoxToggle); 
    checkBoxToggle = !checkBoxToggle;
    alert(checkBoxToggle);

    //After the alerts, true becomes false, but false remains false indefinitely. 

    $(this).prop("contentEditable", checkBoxToggle);

    allCharts[chartNumber - 1].dyGraph.setVisibility(visibilityIndex, checkBoxToggle);
});

Answer 1

Few things.

1. Use this instead of document.getElementById(this.id) .

2. Use .isContentEditable instead of .contentEditable while checking if it has the property.

    alert(this.isContentEditable + " " + checkBoxToggle); 

3. Moreover, you need to set the contentEditable property using "true" and not true . Not sure why. So try that!

Finally, change the below:

if (checkBoxToggle) {
    checkBoxToggle = false;
} else {
    checkBoxToggle = true;
}

To:

checkBoxToggle = !checkBoxToggle;

In simple ways, since you are using jQuery , you can just use:

$(this).prop("contenteditable");        // Getter
$(this).prop("contenteditable", true);  // Set to true
$(this).prop("contenteditable", false); // Set to false