why JS function doing the wrong if statement?

I have a function with 2 if statements inside it. There is a variable set it false, and when the function is called, it is supposed to check whether or not the variable is true or false and do a function based on that when the function is false, it tells the variable to become true, and vise versa with if the variable is false. But when I call the function then it will run the opposite if statement. (ie, if the variable is false, then it will do the things that it only should do if the variable is true) I don't understand why this happening. Hope someone can help! I will include a snippet below of the code.

What should happen:
when you click the button its self should turn this color #5aa897, set the variable to true, and the text should change to "On".

What is happening:
when you click the button it turns the button this color #687980, sets the variable to false, and sets the text to "Off". It should only do this if the variable is set to "true", but it is doing it when the text is set to false.

I have no idea why this is happening. I don't know if I set up my function wrong maybe, or my if statement, but I am stuck.

Hope someone can help.

var x = false;

function arOn() {
  if (x == false) {
    document.getElementById('onOff').innerHTML = "On";
    document.getElementById('ar').style.backgroundColor = "#5aa897";
    x = true;
  }
  if (x == true) {
    document.getElementById('onOff').innerHTML = "Off";
    document.getElementById('ar').style.backgroundColor = "#687980";
    x = x - 1;
  }

}

<button id="ar" onclick="arOn()" class="ar">Auto-Run: <span id="onOff">Off</span></button>