CODEWITHSUNDEEP
javascripthtml
newuser12345
newuser12345

Reputation: 21

How do I display results?

I am new to HTML and Javascript. I am trying to make a simple website that counts up yes and no votes. I want to display the number of votes for each. The results should be updated after each vote. When I enter a vote, it gets updated for a split second then reverts back to 0,0,0. How do I resolve this?

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

Upvotes: 1

Views: 148

Answers (3)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

The main problem is button is reloading the page. Either give type="button" or you need to prevent the default event. Also there are few issues:

  1. You haven't closed the </body>.
  2. You cannot have <h1> inside <head>!
  3. Button's type should be either of button, submit or reset, which defaults to submit.
  4. You cannot have a <script> tag, that way how you have used it.

Working Snippet with the alert.

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

Upvotes: 0

Arun Kumar
Arun Kumar

Reputation: 1667

try this 

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

Upvotes: 0

Amit Jamwal
Amit Jamwal

Reputation: 649

Hi Try to remove script tag from your html file. its working fine for me.

Hope this helps...

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>

Upvotes: 1

Related Questions