Mori Mori - 7 months ago 13
Javascript Question

Checkbox toggle in Chrome and Opera

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?


Answer

Try

window.onload = function() {
  document.getElementById('colorsToggle').onchange = function() {
    document.getElementById('textField').classList.toggle('tan');
  }
  document.getElementById('textField').classList.toggle(document.getElementById('colorsToggle').checked ? "tan" : "white");
};
Comments