let ball, startEnd; function startCal() { //variables ball = document.getElementById('ball'); startEnd = document.getElementById('start-end'); startEnd.style.justifyContent = "flex-end"; // the background color of the ball is will be rgb(33 250 18) ball.style.backgroundColor = "#0ee71f "; // the new value of onclick attribute of start-end button // is will be endCal() func startEnd.setAttribute('onclick', 'endCal()'); } function endCal() { //variables ball = document.getElementById('ball'); startEnd = document.getElementById('start-end'); startEnd.style.justifyContent = "flex-start"; // the background color of the ball is will be red ball.style.backgroundColor = "red"; // the new value of onclick attribute is will be startCal() startEnd = document.getElementById('start-end'); startEnd.setAttribute('onclick', 'startCal()'); }

 .oc { width: 385px; height: 30px; display: flex; justify-content: flex-end; } #start-end { display: flex; justify-content: flex-start; align-items: center; height: 30px; width: 65px; background: black; cursor: pointer; border-radius: 250px; } #ball { /* left: 0; display: block; */ transition-duration: 2s; width: 25px; height: 25px; background: red; border-radius: 100%; }

 <div class="oc"> <div id="start-end" onclick="startCal()"> <div id="ball" class="open"></div> </div> </div>