HTML/Javascript 点击计数器不起作用答案

【问题标题】：HTML/Javascript click counter not workingHTML/Javascript 点击计数器不起作用
【发布时间】：2016-05-24 11:07:58
【问题描述】：

我正在为我的朋友制作 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>

【问题讨论】：

标签： javascript html logic counter

【解决方案1】：

您的帖子中有几个问题。

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

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

第三：每个点击步骤都有一个特殊的功能，非常类似于 spagetthi 代码。为什么不设置一个可以在您单击按钮时更改的步骤？

最后，你的最后一个 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>

【讨论】：

【解决方案2】：

onclick 采用函数引用，而不是 function 返回的值。

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

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

到

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

还有一些逻辑不行。

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

做起来

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

【讨论】：