CODEWITHSUNDEEP
javascript
Duplo W
Duplo W

Reputation: 623

How to add +1 to win counter every time a win occurs?

I am trying to add +1 to the win counter every time a win occurs but it doesn't work no matter what I try.

HTML:

<!DOCTYPE html>
<html>  
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
<div id="center">
<button onclick="myFunction1()">Play</button>

<p id="rolled">You rolled:</p>
<p id="test"></p>



<p id="rolled1">Your opponent rolled:</p>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>

<br><br><br>

<span>Wins:</span><span id="span1"></span><br>
<span>Losses:</span><span id="span2"></span><br>
<span>Draws:</span><span id="span3"></span>
</div>

</body>
</html>

Javascript: 

var things = [ 'rock', 'paper', 'scissors'];

function myFunction1() {

var random1 = Math.floor((Math.random()*things.length));
var random2 = Math.floor((Math.random()*things.length));

document.getElementById("test").innerHTML=things[random1];
document.getElementById("test1").innerHTML=things[random2];
document.getElementById("test2").innerHTML='';
document.getElementById("test3").innerHTML='';

document.getElementById("span1").innerHTML=win;
document.getElementById("span2").innerHTML=loss;
document.getElementById("span3").innerHTML=draw;

if (random1 == random2) {

document.getElementById("test2").innerHTML="<h3>It's a draw.</h3>";
}   

else if (random1 == 0 && random2 == 2) {

document.getElementById("test3").innerHTML="You win!";
}

else if (random1 == 1 && random2 == 0) {

document.getElementById("test3").innerHTML="You win!";
}

else if (random1 == 2 && random2 == 1) {

document.getElementById("test3").innerHTML="You win!";
}

else if (random1 == 0 && random2 == 1) {

document.getElementById("test3").innerHTML="You lost!";
}

else if (random1 == 1 && random2 == 2) {

document.getElementById("test3").innerHTML="You lost!";
}

else if (random1 == 2 && random2 == 0) {

document.getElementById("test3").innerHTML="You lost!";
}



var test3 = document.getElementById("test3");
var win = 0;
var loss = 0;
var draw = 0;

Here is where I want to add +1 to the win counter every time a win occurs, but I can't get it to work. I have tried this:

if (test3.innerHTML == "You win!") {

document.getElementById("span1").innerHTML=win + 1;


}

This:

if (test3.innerHTML == "You win!") {

document.getElementById("span1").innerHTML=win++;


}

And this: 

if (test3.innerHTML == "You win!") {

win = win + 1;


}

} //End of myFunction1

What am I doing wrong exactly?

Upvotes: 0

Views: 2306

Answers (3)

Suman Bogati
Suman Bogati

Reputation: 6349

You did not declare the variable outside the function, Declare the win variable outside the function with 0 default value. eg:-

var win = 0;

function myFunction1() {
   if (test3.innerHTML == "You win!") {

   win = win + 1;
   ....

UPDATE Here is the fixed version DEMO

Upvotes: 1

TastySpaceApple
TastySpaceApple

Reputation: 3185

is test3 defined?

if (test3.innerHTML == "You win!") {
}

if not, use

if (document.getElementById("test3").innerHTML == "You win!") {
}

Upvotes: 0

CodeBird
CodeBird

Reputation: 3858

Define var win=0; outside of your function, as it is now your win variable is being created in the function and dying at the end of the function.

Another thing that you can do is: inside the function add this at the top:

var win=parseInt(document.getElementById('span1').innerText);

Upvotes: 0

Related Questions