首先，我想我需要给你一些背景知识。我有1次有关JS经验的讲座，而我对HTML的经验很少。我需要使用一个简单的JS脚本创建一个基本站点。我选择了一个简单的投票系统。例如，您有2种餐厅，您可以对它们进行任何反馈（1-5票）。网站显示特定餐厅的平均票数和票数。一切在Mozilla Firefox和Microsoft Edge上都能正常运行，但在Google Chrome上根本无法运行，我也不知道可能是什么问题。在下面，您可以找到我想在自己的网站中实现的投票系统框架。最初，我用本国语言编写此代码是为了与“队友”保持透明，这是我为该问题创建的一个版本。
谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var votesSum = [0, 0, 0, 0, 0];
var numVotes = [0, 0, 0, 0, 0];
var averageVotes = [0, 0, 0, 0, 0];
function average(clicked_value, sent_id)
{
var id = parseFloat(sent_id[0]);
var averageOutput = "average" + id;
var numVotesOutput = "numVotes" + id;
numVotes[id - 1] += 1;
votesSum[id - 1] += parseFloat(clicked_value);
var average = (votesSum[id - 1] / numVotes[id - 1]).toFixed(2);
averageVotes[id - 1] = average
document.getElementById(numVotesOutput).value = numVotes[id - 1];
document.getElementById(averageOutput).value = averageVotes[id - 1];
}
</script>
</head>
<body>
<div class="vote1">
Restaurant X
<select >
<option id="1a" value="1" onclick="average(this.value,this.id)">1</option>
<option id="1b" value="2" onclick="average(this.value,this.id)">2</option>
<option id="1c" value="3" onclick="average(this.value,this.id)">3</option>
<option id="1d" value="4" onclick="average(this.value,this.id)">4</option>
<option id="1e" value="5" onclick="average(this.value,this.id)">5</option>
</select>
<br />
Average <input id="average1" value="0" size="4" readonly />
<br />
Number of votes <input id="numVotes1" value="0" readonly size="4" />
</div>
<div class="vote2">
Restaurant Y
<select>
<option id="2a" value="1" onclick="average(this.value,this.id)">1</option>
<option id="2b" value="2" onclick="average(this.value,this.id)">2</option>
<option id="2c" value="3" onclick="average(this.value,this.id)">3</option>
<option id="2d" value="4" onclick="average(this.value,this.id)">4</option>
<option id="2e" value="5" onclick="average(this.value,this.id)">5</option>
</select>
<br />
Average <input id="average2" value="0" size="4" readonly />
<br />
Number of Votes <input id="numVotes2" value="0" readonly size="4" />
</div>
</body>
</html>
您已经onclick在选项上设置了，而不是选择元素。
该事件应该在select元素上，并且可能应该在select元素上，onchange以便即使通过键盘或触摸更改了该值，该事件也可以起作用。
例：
<select data-restaurant="1" onchange="average(this.value, this.dataset.restaurant)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
将餐厅ID设置为数据属性。
如果要使用按钮代替：
<div class="vote1">
Restaurant X
<button value="1" name="1" onclick="average(this.value, this.name)">1</button>
<button value="2" name="1" onclick="average(this.value, this.name)">2</button>
<button value="3" name="1" onclick="average(this.value, this.name)">3</button>
<button value="4" name="1" onclick="average(this.value, this.name)">4</button>
<button value="5" name="1" onclick="average(this.value, this.name)">5</button>
<br />
Average <input id="average1" value="0" size="4" readonly />
<br />
Number of votes <input id="numVotes1" value="0" readonly size="4" />
</div>
使用按钮可以解决多个投票具有相同值的问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句