使用 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>

Answer 1

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>

Answer 2

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>