javascript - 如何在剪刀石头布模拟中从 onclick 事件返回值？

Question

我正在编写一个剪刀石头布程序，用户可以在其中按下网页上显示的三个图像(石头、剪刀布或布)中的一个。

当用户单击这些图像之一时，它会将这 3 个图像左侧的图像更改为三个选项之一的手形。此外，用户图像右侧的图片也会随机变化(计算机控制)。

当这两个图像匹配时，就会出现平局。当左边的图像打败右边的图像时，就赢了(石头打纸)。当左边的图像打败右边的图像时，就会有损失。

这三个结果以

的形式写在图片集下面

"Wins: # Ties: # Losses: #"

主题标签代表从 0 开始的数字，随着游戏的进行而变化，并在页面刷新时重置为 0。

我无法弄清楚如何在用户交互时从 JavaScript 向 HTML 文件返回一个值。

我认为 if 语句可以解决问题，但是我网页上的值没有改变，它仍然是空白的。

这是我的 HTML

<tr>
    <td colspan="3" align="center">
        <!--results will change when user interacts-->
        <b>
            <span id="Wins">Wins:&nbsp;</span> 
            <span id="Losses">Losses:&nbsp;</span> 
            <span id="Ties">Ties:&nbsp;</span>
        </b>
    </td>
</tr>

这是来 self 的 javaScript 的 3 的第一部分

var counter = {win: 0, tie: 0, loss: 0}

function clickRock() {
    var computerChoice = Math.floor(Math.random() * 3);

    img = document.getElementById("change1");
    img.src = "leftRockHand.jpg"; //if user presses the rock, the rock hand is displayed
    img = document.getElementById("change2"); 

    //randomly picks a picture of a hand for the computer
    switch(computerChoice){ 
      case 0:
        img.src = "rightRockHand.jpg";
        break;
      case 1:
        img.src = "rightPaperHand.jpg";
        break;
      case 2:
        img.src = "rightScissorHand.jpg";
        break;
    }

    Wins.innerHTML = rockWin;

    if (computerChoice === "rightRockHand.jpg") {
        rockWin + 1;
    }

    return rockWin;
}   

Answer 1

多个问题:

1. 纸质胜过摇滚
2. 使用 rockwin += 1 而不是 rockwin + 1
3. 在根据 rockwin 设置 wins span 之前，您应该设置 rockwin
4. 您没有将 Wins 设置为 wins 跨度
5. 你没有得到rockwins的值

JS

var counter = {win: 0, tie: 0, loss: 0}

    function clickRock() {
        var computerChoice = Math.floor(Math.random() * 3);
        img = document.getElementById("change1");
        img.src = "leftRockHand.jpg"; //if user presses the rock, the rock hand is displayed
        img = document.getElementById("change2"); 
        switch(computerChoice){ //randomly picks a picture of a hand for the computer
        case 0:
            img.src = "rightRockHand.jpg";
        break;
        case 1:
            img.src = "rightPaperHand.jpg";
        break;
        case 2:
            img.src = "rightScissorHand.jpg";
        break;
        }
        var Wins=document.getElementById('Wins');
        var rockwin = Wins.innerHTML;
        if (computerChoice === "rightPaperHand.jpg") {
            rockWin += 1;
        }
        Wins.innerHTML = rockWin;
        return rockWin;
    }