时间戳

首页 > 解决方案 > Rock，Paper，Scissors Increment Score 不起作用，有人能告诉我我做错了什么吗？

javascript - Rock，Paper，Scissors Increment Score 不起作用，有人能告诉我我做错了什么吗？

问题描述

我的图片和消息正在更改为显示胜利、失败、平局，但我在 javascript 中的增量似乎不起作用，因为我的分数没有改变。请帮忙 ：） 

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

我在这里建立了我的变量，这对我来说看起来是正确的......

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

我根据游戏结果将我的增量放在以下 if 语句中，但没有运气...... 

//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();
}

标签： javascript

解决方案

++是一个奇怪的运算符。它增加值，然后返回原始值。

只需draw++;在单独的行上说，然后在下一行显示。

此外<input>，元素不包含 HTML。设置value属性，而不是innerHTML属性。或者最好你可以将它们更改为<span>元素或其他东西，因为它们不是输入。

推荐阅读