html/js 中的投票计数器答案

【问题标题】：Vote counter in html/jshtml/js 中的投票计数器
【发布时间】：2016-10-30 21:14:19
【问题描述】：

我是编程新手，一直在学习 HTML、CSS 和 Javascript。我正在开展一个涉及即将举行的选举的项目，其中用户按下按钮（在 html 中使用 <form>）为候选人投票。我遇到的问题是转发结果。使用 javascript 或 html，我如何能够跟踪每个按钮被按下的次数，并稍后在网页中传递信息，说明每个候选人的票数和总票数。

编辑我稍微弄乱了代码，这是我当前的 javascript 文件，我将程序设置为在 alert() 消息中告诉你你投票给谁，但名称的候选人没有正确出现...

<!DOCTYPE html>
<html>     
<head>         
<meta charset="utf-8" >         
<title>Election</title>
</head>
<body>   
<center>
<h1>2016 Presidential Election</h1>
<h2>Vote Here</h2>
<form>
<button type="button" onclick="clicksubmit()">Click to vote for Trump</button>
<button type="button" onclick="clicksubmit()">Click to vote for Hillary</button>
</form>
<h3>Results:</h3>
</center>
<script src="election.js" type="text/javascript"></script>
</body> 
</html>

JS：

function clicksubmit(){

    var votehillary = document.getElementById('hillary'); 
    alert("You voted for "+ votehillary);
    var votetrump = document.getElementById('trump'); 
    alert("You voted for "+ votetrump);

}

【问题讨论】：

向我们展示你到目前为止所做的事情
您需要向我们展示您的代码。这样我们就可以看到错误在哪里。
我将在一分钟内上传代码，我需要从我的笔记本电脑中检索它。它更多的是缺乏知识然后是一个错误，但我上传了我所拥有的。
为了统计来自多个用户的计数，然后将它们反馈给访问者，您需要在服务器端存储数据，这将超出您当前的技能范围。
我的印象是我需要使用类似“document.getElementById()”的东西。它需要做的就是主动显示按钮被点击的次数。每次重新加载页面时它都应该重置，它应该比我想你意识到的要简单得多。

标签： javascript html forms button

【解决方案1】：

要计算您的按钮点击次数，您可以为每个候选者声明一个变量，并在每次点击时递增它们。为此，您需要更改按钮元素和结果标题：

<h3 id="results">
  total: 0
  trump: 0
  hillary: 0
</h3>
<button type="button" id="trump-button">Click to vote for Trump</button>
<button type="button" id="hillary-button">Click to vote for Hillary</button>

在您的election.js 文件中，您可以获取每个按钮并对它们应用onClick 事件，增加页面加载时声明的变量：

var trump = 0;
var hillary = 0;

function refreshResults () {
  var results = document.getElementById('results');
  results.innerHTML = 'total: ' + (trump + hillary);
  results.innerHTML += '<br />trump: ' + trump;
  results.innerHTML += '<br />hillary: ' + hillary;
}

document.getElementById('trump-button').addEventListener('click', function () {
  trump++;
  refreshResults();
});

document.getElementById('hillary-button').addEventListener('click', function () {
  hillary++;
  refreshResults();
});

【讨论】：

但是，这段代码可以工作，但写得不好，可以通过多种方式改进。
最终产品产生了我想要的东西。请问 .addEventListener 和 refreshResults() 是做什么的？
addEventListener 是每个 DOM 节点都有的方法。使用此方法，您可以将函数应用于单击等事件，因此当单击 DOM 节点时会调用该函数。 refreshResults 调用在第 4 行创建的函数。它设置结果标题的 innerHTML。