HTML/Javascript 点击计数器不工作

Question

我正在 HTML 为我的朋友做一个 "cookie clicker" 风格的东西。

我得到了某种工作的点击计数器。基本上，当您单击图像时，底部的数字应在每次单击时增加一个。然后在侧面有按钮可以更改每次单击时数字增加的数量。即：当您在不按下按钮的情况下单击图像时，数字递增 1，当您按下“2 次点击”按钮时，每次单击数字应该递增 2。

当我单击按钮时，它们使数字增加给定的数量（在按钮上），然后单击图像什么也没做...

还有一些逻辑不通。

代码如下： `

<script type="text/javascript">
   //Inital click value
   var clicks = 0;
   
   //Click counters
   
   function clicklee1() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
   };
   function clicklee2() {
    clicks += 2;
    document.getElementById("clicks").innerHTML = clicks;
   };
   function clicklee3() {
    clicks += 5;
    document.getElementById("clicks").innerHTML = clicks;
   };
   function clicklee4() {
    clicks += 10;
    document.getElementById("clicks").innerHTML = clicks;
   };
   function clicklee5() {
    clicks += 100;
    document.getElementById("clicks").innerHTML = clicks;
   };
   function clicklee6() {
    clicks += 1000;
    document.getElementById("clicks").innerHTML = clicks;
   };
   function clicklee7() {
    clicks += 1000000;
    document.getElementById("clicks").innerHTML = clicks;
   };
   
   //Changing the "onclick" value of lee
   
   function changeclicks1() {
    document.getElementById("lee").onclick = clicklee1();
   }
   function changeclicks2() {
    document.getElementById("lee").onclick = clicklee2();
   }
   function changeclicks3() {
    document.getElementById("lee").onclick = clicklee3();
   }
   function changeclicks4() {
    document.getElementById("lee").onclick = clicklee4();
   }
   function changeclicks5() {
    document.getElementById("lee").onclick = clicklee5();
   }
   function changeclicks6() {
    document.getElementById("lee").onclick = clicklee6();
   }
   function changeclicks7() {
    document.getElementById("lee").onclick = clicklee7();
   }
   
   //Unlockable logic
   
   if(clicks < 5) {
            document.getElementById('changebutton2').disabled = true;
   }
   if(clicks >= 5) {
            document.getElementById('changebutton2').disabled = false;
   }
   
   if(clicks < 20) {
            document.getElementById('changebutton3').disabled = true;
   }
   if(clicks >= 20) {
            document.getElementById('changebutton3').disabled = false;
   }
   
   if(clicks < 50) {
            document.getElementById('changebutton4').disabled = true;
   }
   if(clicks >= 50) {
            document.getElementById('changebutton4').disabled = false;
   }
   
   if(clicks < 75) {
            document.getElementById('changebutton5').disabled = true;
   }
   if(clicks >= 75) {
            document.getElementById('changebutton5').disabled = false;
   }
   
   if(clicks < 200) {
            document.getElementById('changebutton6').disabled = true;
   }
   if(clicks >= 200) {
            document.getElementById('changebutton6').disabled = false;
   }
   
   if(clicks < 500) {
            document.getElementById('changebutton7').disabled = true;
   }
   if(clicks >= 500) {
            document.getElementById('changebutton7').disabled = false;
   }
  </script>
<img id="lee" src="lee.png" height="300" width="300" onclick="clicklee1()">
  <p>Clicks: <a id="clicks">0</a></p>
  <div class="unlocks" style="text-align: right;">
   <button id="changebutton1" onclick="changeclicks1()">1 Click</button><br>
   <p>Requires 5 clicks</p>
   <button id="changebutton2" onclick="changeclicks2()">2 Clicks</button><br>
   <p>Requires 20 clicks</p>
   <button id="changebutton3" onclick="changeclicks3()">5 Clicks</button><br>
   <p>requires 50 clicks</p>
   <button id="changebutton4" onclick="changeclicks4()">10 Clicks</button><br>
   <p>Requires 75 clicks</p>
   <button id="changebutton5" onclick="changeclicks5()">100 Clicks</button><br>
   <p>Requires 200 clicks</p>
   <button id="changebutton6" onclick="changeclicks6()">1,000 Clicks</button><br>
   <p>Requires 500 clicks<p/>
   <button id="changebutton7" onclick="changeclicks6()">1,000,000 Clicks</button>
  </div>

Answer 1

onclick 采用函数引用，而不是 return 由 function 编辑的值。

更改此行（对其他行也是如此）

document.getElementById("lee").onclick = clicklee1();

至

document.getElementById("lee").onclick = clicklee1;

There is also some logic that does not work.

该逻辑需要在 document.onload 事件处理程序中，因为 document.getElementById('changebutton2') 将 return 为空，否则该元素尚未加载到 DOM 中。

成功

document.onload = function(){
    if(clicks < 5) {
            document.getElementById('changebutton2').disabled = true;
    }
    if(clicks >= 5) {
            document.getElementById('changebutton2').disabled = false;
    }
    //rest of the logic
};

Answer 2

您的 post 中存在多个问题。

首先是脚本在html之前，这样可以防止 document.getElementById 可以工作，因为 html 还没有完全解析。它应该在 window.onload 或等效函数之后，或包含在其中。

第二个是另一个答案指出的，onclick 将函数作为参数，而不是其评估的结果。

第三：每个点击步骤都有一个特殊的功能是非常像意大利面条的代码。为什么不设置一个可以在您单击按钮时更改的步骤？

最后，您的最后一个 if 语句只执行一次，每次应该执行一次 click 值更改

您可以将其包装在每次单击图像时调用的函数中，或者使用 knockout 中的可观察对象。为了让它更接近您的输入代码，我采用了第一种方法。

//Inital click value
var clicks = 0;
var step = 1;

//Click counters

function clicklee() {
  clicks += step;
  document.getElementById("clicks").innerHTML = clicks;
  enableClicks();
};
//Changing the "onclick" value of lee

function changeclicks1() {
  step = 1;
}

function changeclicks2() {
  step = 2;
}

function changeclicks3() {
  step = 5;
}

function changeclicks4() {
  step = 10;
}

function changeclicks5() {
  step = 20;
}

function changeclicks6() {
  step = 100;
}

function changeclicks7() {
  step = 1000;
}

//Unlockable logic

function enableClicks() {
  if (clicks < 5) {
    document.getElementById('changebutton2').disabled = true;
  }
  if (clicks >= 5) {
    document.getElementById('changebutton2').disabled = false;
  }

  if (clicks < 20) {
    document.getElementById('changebutton3').disabled = true;
  }
  if (clicks >= 20) {
    document.getElementById('changebutton3').disabled = false;
  }

  if (clicks < 50) {
    document.getElementById('changebutton4').disabled = true;
  }
  if (clicks >= 50) {
    document.getElementById('changebutton4').disabled = false;
  }

  if (clicks < 75) {
    document.getElementById('changebutton5').disabled = true;
  }
  if (clicks >= 75) {
    document.getElementById('changebutton5').disabled = false;
  }

  if (clicks < 200) {
    document.getElementById('changebutton6').disabled = true;
  }
  if (clicks >= 200) {
    document.getElementById('changebutton6').disabled = false;
  }

  if (clicks < 500) {
    document.getElementById('changebutton7').disabled = true;
  }
  if (clicks >= 500) {
    document.getElementById('changebutton7').disabled = false;
  }
}

#lee {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
.button {
  display: block;
}

<div id="lee" height="50" width="50" onclick="clicklee()">click me</div>
<p>Clicks: <a id="clicks">0</a>
</p>
<div class="unlocks">
  <div class="button">
    <button id="changebutton1" onclick="changeclicks1()">1 Click</button>
    <p>Requires 5 clicks</p>
  </div>
  <div class="button">
    <button id="changebutton2" onclick="changeclicks2()">2 Clicks</button>
    <p>Requires 20 clicks</p>
  </div>
  <div class="button">
    <button id="changebutton3" onclick="changeclicks3()">5 Clicks</button>
    <p>requires 50 clicks</p>
  </div>
  <div class="button">
    <button id="changebutton4" onclick="changeclicks4()">10 Clicks</button>
    <p>Requires 75 clicks</p>
  </div>
  <div class="button">
    <button id="changebutton5" onclick="changeclicks5()">20 Clicks</button>
    <p>Requires 200 clicks</p>
  </div>
  <div class="button">
    <button id="changebutton6" onclick="changeclicks6()">100 Clicks</button>
    <p>Requires 500 clicks
      <p/>
  </div>
  <div class="button">
    <button id="changebutton7" onclick="changeclicks7()">1000 Clicks</button>
    <p>Requires 2000 clicks<p/>
  </div>
</div>

HTML/Javascript 点击计数器不工作

HTML/Javascript click counter not working

html

javascript

logic

counter