Checkbox toggle in Chrome and Opera

[Mori]

Steps to reproduce the issue:

1. In your browser Settings select Continue where you/I left off under On startup.
2. Navigate to the demo.
3. Check the checkbox.
4. Edit the text.
5. Close your browser and reopen it. Or duplicate/clone the tab.

Now as you see the checkbox is checked, but the textarea isn’t colored.
I tried it in the latest version of Chrome and Opera in Windows 10. I’m not sure about Safari, but it probably behaves the same way.

Questions:

• Why does it happen?
• What’s a cross-browser solution?

[m3g4p0p]

You’re changing the colour onchange, but when you reopen the browser, the checkbox hasn’t been changed yet; it’s just checked or not. So you need to check whether the checkbox has been checked onload (and I’d suggest to do this within the change event function as well):

var check = function() {

    if (document.getElementById('colorsToggle').checked) {
        document.getElementById('textField').classList.add('tan');
    } else {
        document.getElementById('textField').classList.remove('tan');
    }
};

document.getElementById('colorsToggle').onchange = check;
document.body.onload = check;

[AllanP]

@Mori

Why does it happen?

When you reload the page, everything starts again, so the colour and text are as you originally set it up. To save the setup between page loads you need to use cookies. Have a look at the following link. It may help.
Link to Cookie post

[m3g4p0p]

@AllanP

When you reload the page, everything starts again, so the colour and text are as you originally set it up. To save the setup between page loads you need to use cookies.

It’s usually desired behaviour that everything is reset after reload. However, if you restart the browser (as per the OP) the checkbox remains checked anyway, so you don’t need a cookie for that.

[felgall]

@m3g4p0p

document.body.onload = check;

You could just run

check();

If the JavaScript is where it belongs at the bottom of the page then the checkbox is already loaded and there is no need to wait for all the unrelated files to load before updating it.