Question

编辑：我创建了一个JSfiddle帐户：https://jsfiddle.net/mcgettrm/7huL5bdt/ 但由于第一个按钮不可点击，这似乎无法证明问题。：S

我已经获得了下面显示的JavaScript，它只是一个摇滚，纸张，剪刀游戏，允许玩家在我的网站上与计算机对战，然后询问用户是否想再玩一次。代码工作正常，它正确告诉我谁赢了，然后询问用户是否想再次播放。后来我想要它计算并显示输赢，但直到我解决了以下问题。

以下是问题：

在抽奖的情况下，它会告诉用户结果是抽奖，但是按钮应该更改为＆＃34;另一轮怎么样？＆＃34;没有出现 - 它只是＃34;谁赢了？＆＃34;但奇怪的是 - 在所有其他结果之后，此功能正常（我无法看到代码中的任何差异）。
在其他功能适用于上述情况的情况下（例如＆＃34;计算机赢了＆＃34;或者＃34;用户赢了！＆＃34;）当用户点击＆＃34;另一轮怎么样？＆＃34;按钮 - 它将用户带回到现在选项的正确位置＆＃34; Rock＆＃34;，＆＃34; Paper＆＃34;和＆＃34; Scissors＆＃34;再次（所有显示都正确显示为按钮）但当用户点击其中一个时，没有任何反应。

我只编写了几天的JavaScript代码，你可以想象，这是我的第一个项目，所以我完全不知所措。任何见解都会很棒。

代码：

<script>

    var resolve = function(){
        if(computerChoice === userChoice){
            document.getElementById("rpstext").innerHTML = "It was a draw!"; 
            draw ++;
            document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";

        }
        else if(computerChoice === "rock"){
            if (userChoice == "paper"){
                document.getElementById("rpstext").innerHTML = "You won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
            }
            else {
                document.getElementById("rpstext").innerHTML = "Computer won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
                }
            }
        else if(computerChoice === "paper"){
            if(userChoice === "scissors"){
                document.getElementById("rpstext").innerHTML = "You won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
                }
            else{
                document.getElementById("rpstext").innerHTML = "The computer won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";

                }
        }

        else if(computerChoice === "scissors"){
            if(userChoice === "rock"){
                document.getElementById("rpstext").innerHTML = "You won!"; 
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
                }
            else {
                document.getElementById("rpstext").innerHTML = "The computer won!"; 
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
            }

        }
    }

    var computerChoice = function(){
        var roll = Math.random();
        if(roll <= 0.33){
        document.getElementById("rpstext").innerHTML = "Computer chooses rock!"; 
        computerChoice = "rock";
        document.getElementById("options").innerHTML = " <button class='rpsbutton' type='button' onclick='resolve()'> Who won? </button>";
        }
        else if((roll > 0.33)&&(roll < 0.67)){
        document.getElementById("rpstext").innerHTML = "Computer chooses paper!"; 
        computerChoice = "paper";
        document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='resolve(computerChoice,userChoice)'> Who won? </button>";
        }
        else {
            document.getElementById("rpstext").innerHTML = "Computer chooses scissors!"; 
            computerChoice = "scissors";
            document.getElementById("options").innerHTML = " <button class='rpsbutton' type='button' onclick='resolve()'> Who won? </button>";
            }
    }
    var rock = function(){
        userChoice = "rock";
        computerChoice();
    }
    var paper = function(){
        userChoice = "paper";
        computerChoice();
    }
    var scissors = function(){
        userChoice = "scissors";
        computerChoice();
    }


    var noThanks = function(){
        document.getElementById("rpstext").innerHTML = "Well you suck. Maybe you should go over to the 'essays' part of this site and hang out with all the boring people so that the rest of us can have a good time.";
        document.getElementById("options").innerHTML = "";
    }
    var yesPlease = function(){
        document.getElementById("rpstext").innerHTML = "Great! Which do you choose: Rock, Paper, or Scissors?";
        document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='rock()'>ROCK!</button> <button class='rpsbutton' type='button' onclick='paper()'>PAPER!</button> <button  class='rpsbutton' type='button' onclick='scissors()'>SCISSORS!</button>";
    }

    </script>

一些侧面问题：

是否可以使用.innerHTML连接以显示字符串和变量值？如果没有，一个人怎么做？我似乎无法在网上找到很多东西（我可能没有用正确的术语进行搜索）。
我担心这段代码不会起作用，因为我认为函数内部的值是本地的，并且需要用户选择和计算机选择的全局值来解决＆＃34; resolve＆＃34;比较他们并看谁赢了的功能。但是，至少在这方面，代码似乎起作用。我不确定我的问题是什么，但任何可能有助于我理解在这种情况下使用全局和局部变量的观察/见解都会很棒。

Answer 1

您使用名称computerChoice作为函数和变量。当您将变量设置为选项时，最终会覆盖该函数，这就是您无法再调用它的原因。解决此问题的最简单方法是将函数名称更改为getComputerChoice（并因此更新rock()，paper()和scissors()函数。您也可以，而不是滥用全局变量，重构您的函数以返回值。

第一种方法可用作小提琴here进行测试。

至于为什么如果它是平局的，它将无法工作，你试图增加一个不存在的变量draw，这会导致错误并停止你的代码。

我的摇滚，纸张，剪刀游戏不会重复 - 任何想法？

1 个答案: