用户单击时清除编程的下一单选按钮选择

时间:2018-11-15 22:08:19

标签: javascript radio-button

我需要循环浏览X个单选按钮,并检查每次附加Y秒超时。但是,当用户单击时,我需要覆盖当前存储的“下一个”收音机。我尝试清除超时,但是似乎不是下次单击存储的地方。 JSFiddle

const roadster__activators = document.querySelectorAll('.roadster__activator');
let next__indicator;
const init = () => roadster__activators[0].click();

const nextIndicator = (e) => {
  const indicator = e.currentTarget;
  let racer, func, isKeyClick;
  
  // if a human has clicked the radio button
  e = e || window.event || {x: null};
  if( e.x !== null ){
    next__indicator = indicator.nextElementSibling;
    clearTimeout(racer);
  }   
  
  if (!indicator.classList.contains('__last')) {
    func = () => next__indicator.click();
  } else {
  	func = init;
  }

  racer = setTimeout(func, 5000);
};

roadster__activators.forEach(activator => activator.addEventListener('click', nextIndicator));

init();

<div class="roadster">
  <input class="roadster__activator" type="radio" name="roadster" id="alpha">
  <input class="roadster__activator" type="radio" name="roadster" id="bravo">
  <input class="roadster__activator" type="radio" name="roadster" id="charlie">
  <input class="roadster__activator" type="radio" name="roadster" id="delta">
  <input class="roadster__activator __last" type="radio" name="roadster" id="echo">
</div>

0 个答案:

没有答案