Rock, Paper, Scissors Increment Score not working, can somebody tell me what i'm doing wrong?

Question

My pictures and messages are changing to display win, loss, tie, but my increments in javascript don't seem to be functioning, as my scores don't change. PLEASE HELP :)

<body>

    <h1>Rock, Paper, Scissors</h1>

    <button class="rockbtn" id="playRock">Rock</button>
    <button class="play" id="playPaper">Paper</button>
    <button class="play" id="playScissors">Scissors</button>

    <h2 id="humantitle">Human</h2>
    <img alt="humanPlay" id="human" src="img/scissors.png">

    <h2 id="comptitle">Computer</h2>
    <img alt="compPlay" id="computer" src="img/scissors.png">

    <div id="count">
        Human: <input id="playerWin">
        <br><br> Computer: <input id="compWin">
        <br><br> Draw: <input id="draw">
    </div>

    <h3 id="output"></h3>

    <button id="newgame">New Game</button>

    <script src="rps.js"></script>
</body>


</html>

I have my variables established here, which look correct to me...

var playerWin = 0;
var compWin = 0;
var draw = 0;
var playerChoice; //Rock = 1, Paper = 2, Scissors = 3

function compChoice() {
    var compChoice = Math.floor(Math.random() * 3 + 1);

    if (compChoice === 1) {
        document.getElementById('computer').src = "img/rock.png";
    }

    if (compChoice === 2) {
        document.getElementById('computer').src = "img/paper.png";
    }

    if (compChoice === 3) {
        document.getElementById('computer').src = "img/scissors.png";
    }

I have placed my increments in the following if statements according to the game result, but no luck...

//draw
        if (playerChoice === compChoice) {
            document.getElementById("output").textContent = "You Tied!";

        document.getElementById("draw").innerHTML = draw++;
    }

    //Lose 
    //Rock vs Paper
    else if (playerChoice === 1 && compChoice === 2) {
        document.getElementById("output").textContent = "You Lose! Paper covers rock!"

        document.getElementById("compWin").innerHTML = compWin++;
    }

    //Scissors vs Rock
    else if (playerChoice === 3 && compChoice === 1) {
        document.getElementById("output").textContent = "You Lose! Rock smashes scissors!"

        document.getElementById("compWin").innerHTML = compWin++;
    }

    //Scissors vs Rock
    else if (playerChoice === 2 && compChoice === 3) {
        document.getElementById("output").textContent = "You Lose! Scissors cuts paper!"

        document.getElementById("compWin").innerHTML = compWin++;
    }

    //Win
    //Rock vs Scissors
    else if (playerChoice === 1 && compChoice === 3) {
        document.getElementById("output").textContent = "You Win! Rock smashes scissors!"

        document.getElementById("playerWin").innerHTML = playerWin++;
        }

    //Scissors vs Paper
    else if (playerChoice === 3 && compChoice === 2) {
        document.getElementById("output").textContent = "You Win! Scissors cuts paper!"

        document.getElementById("playerWin").innerHTML = playerWin++;
    }

    //Rock vs Paper
    if (playerChoice === 2 && compChoice === 1) {
        document.getElementById("output").textContent = "You Win! Paper covers rock!"

        document.getElementById("playerWin").innerHTML = playerWin++;
    }
}

//playerChoice = Rock
document.getElementById("playRock").onclick = function () {
    playerChoice = 1;
    document.getElementById('human').src = "img/rock.png";

    compChoice();
}

//playerChoice = Paper
document.getElementById("playPaper").onclick = function () {
    playerChoice = 2;
    document.getElementById('human').src = "img/paper.png";

    compChoice();
}

//playerChoice = Scissors
document.getElementById("playScissors").onclick = function () {
    playerChoice = 3;
    document.getElementById('human').src = "img/scissors.png";

    compChoice();
}

score 1 · Answer 1 · answered Apr 26 '18 at 22:06

1

++ is a weird opreator. It increments the value and then returns the original value.

Just say draw++; on a separate line, and then display it on the next line.

Additionally <input> elements do not contain HTML. Set the value property, not the innerHTML property. Or preferably you could just change them to <span> elements or something, because they're not inputs.

answered Apr 26 '18 at 22:06

Matti Virkkunen

63,558
9
127
159

`++` increments after the line (or block) for use in `for` loops and the like—that's how I remember it anyway. – t56k Apr 26 '18 at 22:08
1

@CD-RUM: It's not necessarily even "the same line or block", it's an expression level thing. It's considered good practice to not mix other operators with `++`/`--` because it gets confusing really fast. – Matti Virkkunen Apr 26 '18 at 22:12
Had to use as per outline, changed to value property and all is good! Thanks! – Dalton Whitehead Apr 26 '18 at 23:56
++var = will increment the value in the current loop. var++ will increment on the next loop. More [here](https://stackoverflow.com/a/6175339/6444625) – hungrykoala Apr 27 '18 at 02:11
@hungrykoala: Nope, the timing doesn't have anything to do with loops either. If you have a for loop for example, whether you have var++ or ++var in the increment part makes no difference. – Matti Virkkunen Apr 27 '18 at 06:56

Rock, Paper, Scissors Increment Score not working, can somebody tell me what i'm doing wrong?

1 Answers1