所以我在我的HTML页面上有这个计数器,每当这个计数器重新上升时,它就会出现。点击图片,当'拇指向下'点击图像,计数器下降。最大值为10.这很好。像这样: 的 HTML
<img src="images/thumb-up.png" onclick="CountUp1();" id="votingup1" />
<span id="counter1">0</span>
<img src="images/thumb-down-dark.png" onclick="CountDown1();" id="votingdown1" />
的JavaScript
<script type="text/javascript">
var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter1");
function CountUp1() {
clicks = Math.min(maxVal, clicks + 1);
display.innerHTML = clicks;
}
function CountDown1() {
clicks = Math.max(minVal, clicks - 1);
display.innerHTML = clicks;
}
</script>
这很好用!
然后我尝试添加这个投票系统的另一部分。显然有不同的功能名称和图像和计数器的不同id。像这样。
<script type="text/javascript">
var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter2");
function CountUp2() {
clicks = Math.min(maxVal, clicks + 1);
display.innerHTML = clicks;
}
function CountDown2() {
clicks = Math.max(minVal, clicks - 1);
display.innerHTML = clicks;
}
</script>
但那并没有奏效。如果我点击第一个竖起大拇指,第二个计数器增加。我确实在一个脚本中有这个,但它没有工作,所以我把它们放在像上面这样的单独的脚本标签中。我也试过调用不同的变量,例如
`<script type="text/javascript">
var minVal2 = 0, maxVal2 = 10, clicks2 = 0,
display = document.getElementById("counter2");
function CountUp2() {
clicks2 = Math.min(maxVal2, clicks2 + 1);
display.innerHTML = clicks2;
}
function CountDown2() {
clicks2 = Math.max(minVal2, clicks2 - 1);
display.innerHTML = clicks2;
}
</script> `
但这似乎也无济于事。我有点卡住了。谁能帮忙。感谢
编辑:第二个html如下:
<img src="images/thumb-up.png" onclick="CountUp2();" id="votingup2" />
<span id="counter2">0</span>
<img src="images/thumb-down.png" onclick="CountDown2();" id="votingdown2" />
答案 0 :(得分:1)
您必须将display = document.getElementById("counter2");
移动到每个功能中
显示的分配是在页面加载时完成的,在两个脚本部分或单个部分中都不重要。
display = document.getElementById("counter1");
display = document.getElementById("counter2"); // overrides global
显示变量,如:
<script type="text/javascript">
var minVal2 = 0, maxVal2 = 10, clicks2 = 0,
function CountUp2() {
clicks2 = Math.min(maxVal2, clicks2 + 1);
var display = document.getElementById("counter2");
display.innerHTML = clicks2;
}
function CountDown2() {
clicks2 = Math.max(minVal2, clicks2 - 1);
var display = document.getElementById("counter2");
display.innerHTML = clicks2;
}
</script> `
或在第二个计数器上使用display2
代替display
。
答案 1 :(得分:0)
那是因为这些行:
var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter1");
还有:
var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter2");
在函数之外,因此是全局的...因此它们会相互覆盖。也许只有一个版本的每个CountUp()和CountDown(),但允许一个参数指定计数器的数量。
编辑:如果您还将显示变量更改为display1和display2,我认为您可以使用它。