Deselect a default checked radio button while using an eventListener

Question

I have a script that clicks a button after a selected period of time. A user clicks a radio button if a change in time is needed. I have the 10s radio button as default but this seems to be making the button click buggy, and I get random button clicks. How can I disable the default button from being 'checked' to 'unchecked' when a user clicks a different button.
I have implemented an addEventListener() but I'm not able to disable the default radio button from the checked state after another button is clicked.

document.getElementById("testButton").onclick = function() {clickFunction()}

function clickFunction(){
    var newElem = document.createElement("p");
    newElem.innerHTML = "A click here!";
    document.body.appendChild(newElem);
}

function clickOnInterval(intervalNo){ 
    setInterval(function(){
        document.getElementById("testButton").click();
    },intervalNo);
}

if(document.querySelector('input[name="time"]')){
    document.querySelectorAll('input[name="time"]').forEach((element)=>{
        element.addEventListener("change",function(e){
            //doesn't work ;-;
            if(e.target.id == 'thirty'){
                radioUnChecked('ten')
            }
            checkButton();
        });
    });
}

function checkButton(){
    if(document.getElementById('ten').checked){
        clickOnInterval(10000);
    }
    else if(document.getElementById('fifteen').checked){
        clickOnInterval(15000);
    }
    else if(document.getElementById('thirty').checked){
        clickOnInterval(30000);
    }
    if(document.getElementById('onemin').checked){
        clickOnInterval(60000);
    }
}

if(document.getElementById('ten').checked){
    checkButton();
}

function radioUnChecked(id) {
    document.getElementById(id).checked = false;
}
//checkButton();

// function radioChecked(id) {
//     document.getElementById(id).checked = true;
// }

<form id="radio-form">
        <input type="radio" name="time" value="10s" id="ten" checked="checked">
        <label for="ten">10s</label>
        <input type="radio" name="time" value="15s" id="fifteen">
        <label for="ten">15s</label>
        <input type="radio" name="time" value="30s" id="thirty">
        <label for="ten">30s</label>
        <input type="radio" name="time" value="60s" id="onemin">
        <label for="ten">60s</label>
</form>
<br>

<button type="button" id="testButton">Meow</button>

I think you're looking for [`clearInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval). If I'm understanding correctly, you'll want to call `clearInterval` on the last interval every time a new radio button is checked. — Rojo, Apr 30 '21 at 12:48
have you tried making a radio button specifically for nothing. — StepPen-codes, Apr 30 '21 at 12:49
@Rojo The interval time is fine, I want it to keep clicking the button. The problem is when I set the checked="checked" on the html I don't know how to uncheck it. — FuruiTatsu, Apr 30 '21 at 12:50
@StepPen-codes this will make the button click not to be triggered. — FuruiTatsu, Apr 30 '21 at 12:51
I converted your code to a snippet and I can press a different radio button, which unchecks the first. Is there something else that I am not noticing? — Rojo, Apr 30 '21 at 12:53
@Rojo Yes, maybe I'm not clear in my question, it unchecks it, but it still triggers the button. So it is still checked because of the default code in the html checked="checked" thats what I'm trying to change when someone clicks a different radio button. — FuruiTatsu, Apr 30 '21 at 12:56
@StepPen-codes I want it to stop clicking the button after every 10 seconds and change to the other radio buttons time interval when a user selects a different time period. — FuruiTatsu, Apr 30 '21 at 12:58
@StepPen-codes no it will stick to 10s if no other is selected. If the user selects 15s then the it should no longer trigger a button click after 10s but instead after 15s. — FuruiTatsu, Apr 30 '21 at 13:01
I think I get it now. Your code makes it that it makes new Intervals when radio button is clicked but you want the same interval to change the interval itself, am I right? — StepPen-codes, Apr 30 '21 at 13:04
Does this answer your question? [Changing the interval of SetInterval while it's running](https://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running) — Rojo, Apr 30 '21 at 13:16

StepPen-codes · Answer 1 · 2021-04-30T13:45:12.083

We can make an Illusion as if the interval extends upon change

First we must make the interval set to a small amount of time. Then let the interval check if it has ran as many times as it takes to equal the required interval.

function changeInterval(i) {
  interval = i
  console.log('Interval was changed to: ', interval)
}

function clickFunction() {
  let clicked = document.querySelector('#clicked')
  times++
  clicked.innerText = times
}

const precision = 100
let runningTime = 0
let interval = 0
let button = document.getElementById("testButton")
let times = 0
changeInterval(10000)
button.addEventListener('click', clickFunction)

for (let radio of document.querySelectorAll('.rad'))
  radio.addEventListener('change', function() {
    changeInterval(parseInt(event.target.value))
  })

let timer = setInterval(() => {
  runningTime += precision // whenever timer sets off it adds value to running time
  document.getElementById("runningTime").textContent = runningTime / 1000
  if (runningTime >= interval) { // when runningtime reaches the interval provided it starts back to zero and clicks the button
    runningTime = 0
    button.click();
  }

}, precision) // time in interval is setoff to precision

<form id="radio-form">
  <input class="rad" type="radio" name="time" value="10000" id="ten" checked="checked">
  <label for="ten">10s</label>
  <input class="rad" type="radio" name="time" value="15000" id="fifteen">
  <label for="ten">15s</label>
  <input class="rad" type="radio" name="time" value="30000" id="thirty">
  <label for="ten">30s</label>
  <input class="rad" type="radio" name="time" value="60000" id="onemin">
  <label for="ten">60s</label>
</form>
<br>
<span id=runningTime></span> seconds...
<br>
<br>
<button type="button" id="testButton">Meow</button>
<br> Times the button was clicked: <span id=clicked>0</span>

this way the interval extends upon change in checked buttons — StepPen-codes, Apr 30 '21 at 13:38

score 1 · Accepted Answer · answered Apr 30 '21 at 13:03

You want clearInterval(). I have added a variable in the global scope. Every time clickOnInterval() is called, the last interval stops and a new one is created using the new time. I have also added a console.log(document.getElementById('ten').checked) to show that the first radio button becomes unchecked.

document.getElementById("testButton").onclick = function() {clickFunction()}

function clickFunction(){
    var newElem = document.createElement("p");
    newElem.innerHTML = "A click here!";
    document.body.appendChild(newElem);
}

var currentInterval;
function clickOnInterval(intervalNo){
    clearInterval(currentInterval);
    currentInterval = setInterval(function(){
        document.getElementById("testButton").click();
    },intervalNo);
}

if(document.querySelector('input[name="time"]')){
    document.querySelectorAll('input[name="time"]').forEach((element)=>{
        element.addEventListener("change",function(e){
            //doesn't work ;-;
            if(e.target.id == 'thirty'){
                radioUnChecked('ten')
            }
            checkButton();
        });
    });
}

function checkButton(){
    console.log(document.getElementById('ten').checked)
    if(document.getElementById('ten').checked){
        clickOnInterval(10000);
    }
    else if(document.getElementById('fifteen').checked){
        clickOnInterval(15000);
    }
    else if(document.getElementById('thirty').checked){
        clickOnInterval(30000);
    }
    if(document.getElementById('onemin').checked){
        clickOnInterval(60000);
    }
}

if(document.getElementById('ten').checked){
    checkButton();
}

function radioUnChecked(id) {
    document.getElementById(id).checked = false;
}
//checkButton();

// function radioChecked(id) {
//     document.getElementById(id).checked = true;
// }

<form id="radio-form">
        <input type="radio" name="time" value="10s" id="ten" checked="checked">
        <label for="ten">10s</label>
        <input type="radio" name="time" value="15s" id="fifteen">
        <label for="ten">15s</label>
        <input type="radio" name="time" value="30s" id="thirty">
        <label for="ten">30s</label>
        <input type="radio" name="time" value="60s" id="onemin">
        <label for="ten">60s</label>
</form>
<br>

<button type="button" id="testButton">Meow</button>

I think he doesn't want to scrap the ongoing interval, I believe he just wants to extend the existing one — StepPen-codes, Apr 30 '21 at 13:05
@StepPen-codes I'm hoping you're wrong about that, lol. But if it is, then it's a [dupe](https://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running) — Rojo, Apr 30 '21 at 13:07
@Rojo Does this mean I would have been able to implement the same thing using setTimeout() ? — FuruiTatsu, Apr 30 '21 at 13:15
@Rojo Does this make it that if I select say 30s it will call clearInterval on it everytime? — FuruiTatsu, Apr 30 '21 at 13:23
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231788/discussion-between-rojo-and-furuitatsu). — Rojo, Apr 30 '21 at 13:23

Deselect a default checked radio button while using an eventListener

2 Answers2