Unable to set If condition back and forth in Javascript [closed]

I want to have the ball simultaneously go from "OFF" gray to "ON" yellow and I just can't get it to work. I've tried with both Else and with another If condition.

function onBall3Click() {
  var ball3 = document.querySelector('.ball3');
  if (ball3.innerText = "OFF") {
    ball3.innerText = "ON";
    ball3.style.backgroundColor = 'yellow';
  } else {
    ball3.innerText = "OFF";
    ball3.style.backgroundColor = 'gray';
  }
}

body {
  background-color: black;
  text-align: center;
}

div {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 50%;
  transition: 0.3s;
  line-height: 50px;
}

.ball3 {
  background-color: gray;
}

<div class="ball3" onclick="onBall3Click()">OFF</div>