Script doesnt read checkbox

Question

I'm trying to make chrome extension to refresh site every specified time when checkbox is selected. At this point I'm facing problem that my site isn't refreshed when checkbox is selected so neither it relunch after timeout time. Could you help me with this? html

<input type="checkbox" class="timer" name="timer" value="yes" id="timer" onclick="validate">

js

function validate() {
    if (document.getElementById('timer').checked) {
        for (var i = 0; i < 6; i++) {
            setTimeout(function () {

                chrome.tabs.query({ active: true, currentWindow: true }, function (arrayOfTabs) {

                    var code = 'window.location.reload();';
                    chrome.tabs.executeScript(arrayOfTabs[0].id, { code: code });


                });
            }, 501);
        }
    }
}

What is worth noting i have prepared script to hold information if checkbox is clicked or not so it doesn't disapear after reclicking on popup

(function zzz() {
    // variable to store our current state
    var cbstate;    
    window.addEventListener('load', function () {        
        cbstate = JSON.parse(localStorage['CBState'] || '{}');        
        for (var i in cbstate) {
            var el = document.querySelector('input[name="' + i + '"]');
            if (el) el.checked = true;
        }        
        var cb = document.getElementsByClassName('timer');
               for (var i = 0; i < cb.length; i++) {
                        cb[i].addEventListener('click', function (evt) {               
                if (this.checked) {
                    cbstate[this.name] = true;
                }                
                else if (cbstate[this.name]) {
                    delete cbstate[this.name];
                }               
                localStorage.CBState = JSON.stringify(cbstate);
            });
        }
    });
})();

Once you reload the page, the checkbox will go back to its default state of being unchecked and the `validate()` function's timer will stop. You need to store the state of the checkbox between page loading (`localStorage`). — Scott Marcus, May 18 '22 at 19:27
Does the function even get called? An `onclick` attribute isn't best practice, but you only have a string in there, not a function call. Try `onclick="validate();"`. Or better yet, `document.getElementById("timer").addEventListener("click",validate);` — mykaf, May 18 '22 at 19:32
FYI: [You should not use `getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474), especially in conjunction with loops. — Scott Marcus, May 18 '22 at 19:32
Your `zzz` function is extreme overkill. You just need to set the checkbox's checked state (ie. `localStorage.setItem("checked", "true")`) when the checkbox becomes checked and retrieve it upon page load (ie. `localStorage.getItem("checked")`). There is no need for loops and if/then logic to set it. — Scott Marcus, May 18 '22 at 19:36

score 0 · Answer 1 · answered May 18 '22 at 19:32

2 things. Put the parens next to your function name and put some logic in your function so that it clears the timeout and resets it. Otherwise you could end up with numereous timers going off if someone unchecks/checks

<input ... onclick="validate()">

In your script, I didn't understand the role for the FOR loop, so I omitted it here.

let timerInt;

function validate() {
  clearTimeout(timerInt)
  if (document.getElementById('timer').checked) {
    timerInt = setTimeout(function() {
      chrome.tabs.query({
        active: true,
        currentWindow: true
      }, function(arrayOfTabs) {
        var code = 'window.location.reload();';
        chrome.tabs.executeScript(arrayOfTabs[0].id, {code: code});
      });
    }, 501);
  }
}

Checkbox function still doesn't get called – Losiox May 18 '22 at 20:01 — Losiox, May 18 '22 at 20:01

Script doesnt read checkbox

1 Answers1