JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div id="divA">
  Showing Div A
</div>
<div id="divB">
Showing Div B
    <input type="button" value="Click Me" onclick="delayTimer()" />
</div>

<div id="timer"></div>

<script>
    var isShowingA = false;
    var timer; //execute showDiv at 2 secs     
    
    showDiv(); //call once to initiate timer
    
    function showDiv () {
        var divToShow = (isShowingA)?"divB":"divA";
        var divToHide = (isShowingA)?"divA":"divB";
        
        isShowingA = !isShowingA;
    
        
        document.getElementById(divToShow).style.display = 'block';
        document.getElementById(divToHide).style.display = 'none';
    
        timer = setTimeout(showDiv, 2000);
    }
    
    function delayTimer() {
       clearTimeout(timer);
       
      //set new timer
      timer = setTimeout(function () {
        showDiv();
      }, 4000);
    }  
    
    var timeInSecs = 1;
    setInterval(
       function () {
           document.getElementById("timer").innerHTML = timeInSecs++;
       }, 1000
    );
    
</script>

CSS

div {
    padding: 15px;
    border: 1px solid navy;
}

div # {
    padding: 5px;
    border: 1px solid navy;
    width: 20px;
}