Почему я не могу добавить счетчик к моей функции onclick?

Question

Я хотел попробовать использовать счетчик, чтобы изменить поведение клика.Все мои другие условия работали, но я не понимаю, почему мое условие подсчета не работает.Кто-нибудь знает, что я могу сделать, чтобы это работало?

Для подсчета, который я пробовал - (this.count == 2), (count == 2) и (uh.count == 2)

function uh() {
  var words;
  var conf = confirm("ooh that felt goood");
  var button = document.querySelector("#selector");
  var box =
    document.querySelector("#box");
  var count = 0;
  if (this.count == 5) {
    button.classname = "button3";
    words = " ";
  } else if (this.count == 4) {
    button.classname = "button3";
    words = "I give up. This is all you get.";
    count++;
  } else if (this.count == 3) {
    button.classname = "button3";
    words = "...";
    count++;
  } else if (this.count == 2) {
    button.className = "button2";
    words = "the power?";
    count++;
  } else if (button.className == "button3") {
    button.className = "button2";
    words = "ahahaha... ha.. uh..";
    count++;
  } else if (button.className == "button2") {
    button.className = "button3";
    box.className = "box";
    words = "THE POWER";
  } else if (conf == true) {
    words = "AHAHAHA I HAVE YOU NOW";
    button.className = "button2";
  } else {
    words = "...";
    button.className = "button";
  }
  document.querySelector(".header").innerHTML = words;
}

body {
  background-color: black;
}

#header {
  text-align: center;
}

.header {
  background-color: #000099;
  color: white;
  display: inline-block;
  border: 5px solid white;
  padding: 20px;
  width: 90%;
}

#box {
  text-align: center;
  background-color: green;
  height: 500px;
}

.box {
  text-align: center;
  height: 500px;
}

.button {
  background-color: grey;
  color: white;
  margin: 170px;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

.button2 {
  background-color: #ff0000;
  border: none;
  color: white;
  padding: 15px 32px;
  margin: 170px;
  text-decoration: none;
  display: inline-block;
  font-size: 40px;
  box-shadow: 0px 0px 10px white;
}

.button3 {
  background-color: black;
  border: none;
  color: red;
  padding: 30px 60px;
  margin: 170px;
  text-decoration: none;
  display: inline-block;
  font-size: 60px;
  box-shadow: 0px 0px 20px 5px gold;
}

<div id=h eader>
  <h1 class="header"> I feel an itch...
    <h1>
</div>
<div id="box">
  <input type="button" id="selector" class="button" value="CLICK ME" onclick="uh()">
</div>

Answer 1

count объявляется и инициализируется заново каждый раз, когда вызывается uh().Время жизни переменной заканчивается, когда функция заканчивается, поэтому нет способа сохранить ее значение при нескольких вызовах uh().

. Что бы вы могли сделать, это объявить объект с именем count с тем же свойством name иcall() uh на объекте.Тогда this будет ссылаться на объект, который вызывается uh(), и, таким образом, this.count будет иметь передаваемое значение при нескольких вызовах одного и того же объекта.

var count = {count: 0};

console.log(count.count);//0

up.call(count);

function up() {

this.count++;
//... here add any kind of check on the value of count
}

console.log(count.count);//1