Question

我是HTML和Javascript的新手。我正在努力创建一个简单的网站，其中包括是和否的投票。我想显示每个人的投票数。每次投票后都应更新结果。当我进行投票时，它会在瞬间更新，然后恢复为0,0,0。我该如何解决这个问题？

＆＃13;

var yes = 0;
var no = 0;

function clickYes() {
  yes++;
  alert("You pressed yes");
  refreshResults();
}

function clickNo() {
  no++;
  alert("You pressed no");
  refreshResults();
}

function refreshResults() {
  var results = document.getElementById('results');
  results.innerHTML = "Total: " + (yes + no);
  results.innerHTML += "<br>Yes: " + yes;
  results.innerHTML += "<br>No: " + no;
}

＆＃13;

<!DOCTYPE html>
<html>
<script src="voteCount.js" type="text/javascript"></script>

<head>
  <h1>This Website Counts Up Votes</h1>
</head>

<body>
  <div id="userInput">
    <h2>Yes or No?</h2>
    <form>
      <button type="radio" onclick="clickYes()" id="yesbutton">Yes</button>
      <button type="radio" onclick="clickNo()" id="nobutton">No</button>
    </form>
  </div>

  <h3 id="results">
      <script>
      refreshResults();
      </script>
    </h3>

</html>

＆＃13;

Answer 1

您好尝试从您的html文件中删除脚本标记。它对我来说很好。

希望这会有所帮助......

var yes = 0;
var no = 0;

function clickYes() {
  yes++;
  
  refreshResults();
}

function clickNo() {
  no++;
  
  refreshResults();
}

function refreshResults() {
  var results = document.getElementById('results');
  results.innerHTML = "Total: " + (yes + no);
  results.innerHTML += "<br>Yes: " + yes;
  results.innerHTML += "<br>No: " + no;
}

<!DOCTYPE html>
<html>
<script src="voteCount.js" type="text/javascript"></script>

<head>
  <h1>This Website Counts Up Votes</h1>
</head>

<body>
  <div id="userInput">
    <h2>Yes or No?</h2>
    <form>
      <button type="radio" onclick="clickYes()" id="yesbutton">Yes</button>
      <button type="radio" onclick="clickNo()" id="nobutton">No</button>
    </form>
  </div>

  <h3 id="results">
      

</html>

Answer 2

试试这个

function refreshResults() {
    var results = document.getElementById('results');
    var output = "Total: " + (yes + no);
        output += "<br>Yes: " + yes;
        output += "<br>No: " + no;
    results.innerHTML = output;
}

Answer 3

主要问题是按钮正在重新加载页面。提供type="button"或者您需要阻止默认事件。还有一些问题：

您尚未关闭</body>。
<h1>内无法<head>！
按钮的类型应为button，submit或reset，默认为submit。
你不能拥有<script>标签，就像你使用它一样。

工作代码段与alert。

＆＃13;

var yes = 0;
var no = 0;

function clickYes() {
  yes++;
  alert("You pressed yes");
  refreshResults();
}

function clickNo() {
  no++;
  alert("You pressed no");
  refreshResults();
}

function refreshResults() {
  var results = document.getElementById('results');
  results.innerHTML = "Total: " + (yes + no);
  results.innerHTML += "<br>Yes: " + yes;
  results.innerHTML += "<br>No: " + no;
}

＆＃13;

<h1>This Website Counts Up Votes</h1>
<div id="userInput">
  <h2>Yes or No?</h2>
  <form>
    <button type="button" onclick="clickYes()" id="yesbutton">Yes</button>
    <button type="button" onclick="clickNo()" id="nobutton">No</button>
  </form>
</div>

<h3 id="results"></h3>

＆＃13;

如何显示结果？

3 个答案: