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()');

}

.o-c {
  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="o-c">
  <div id="start-end" onclick="startCal()">
    <div id="ball" class="open"></div>
  </div>
</div>