Why doesn't this Javascript succesfully change the background on the second mouseover? The background is only changing to purple

The function is supposed to increment x by 1 everytime it launches, thus forcing the code to choose a different option on the next launch.

function changeBackground() {
var x = 0;
if (x % 2 === 0) {
document.getElementById("sample").style.backgroundColor = "purple";
}
else {
document.getElementById("sample").style.backgroundColor = "white";
}
x++;
}
var x = document.getElementById("sample");
x.onmouseover = changeBackground;

This is just grabbing a heading and launching changeBackground everytime the cursor is placed on it.