HTML / Javascript点击计数器无法正常工作

时间：2016-05-24 11:07:59

标签： javascript html logic counter

我正在做一个＆＃34; cookie点击器＆＃34;我朋友的HTML风格。

我已经点击了那种工作的点击计数器。 基本上，当您单击图像时，每次单击时底部的数字应增加1。然后，侧面有按钮，可以更改每次点击时数量增加的数量。 即：当您在不按下按钮的情况下单击图像时，当您按下＆＃34; 2次单击＆＃34;时，数字会增加1。按钮，数字应每次点击增加2。

当我点击按钮时，他们按照给定的数量（在按钮上）使数字增加，然后点击图像什么都不做......

还有一些逻辑不起作用。

这是代码： `

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

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
};

答案 1 :(得分：0)

您的帖子中有几个问题。

首先是脚本在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>

相关问题
最新问题