javascript - .innerHTML无法更新Javascript中的HTML

在剪刀石头布的分配上工作，其中全局变量根据计算机或人类获胜而向前递增。我的函数运行正常，但使用.innerHTML时记分板不会更新。有什么建议？

document.getElementById("humanScore").innerHTML = humanTotal;
document.getElementById("computerScore").innerHTML = compTotal;

http://codepen.io/anon/pen/GvpaJ

最佳答案

您遇到了一些问题。

在播放函数中，您没有对computerChoice变量执行任何操作，这应该是对compPlay()的函数调用的结果。当前是var computerChoice = compPlay，它实际上是将computerChoice分配给一个函数，而不是其结果。

其次，在测试if语句时，您正在再次检查值compPlay，这是一个函数，我认为应该为computerChoice

第三。 compPlay的返回值是一个索引，它应该来自compOptions数组的该索引值

下面的更新代码

var humanTotal =0;
var compTotal=0;

document.getElementById("rock").onclick = setRock;
document.getElementById("paper").onclick = setPaper;
document.getElementById("scissors").onclick = setScissors;

function setRock(){
    play("rock")
}

function setPaper(){
    play("paper")
}

function setScissors(){
    play("scissors")
}

function play(humanChoice) {
    var computerChoice = compPlay(); //<-- Change Here

    //And all the following if statements to check the computer choice
    if (humanChoice == "rock"){
        if (computerChoice  =="rock"){
        } else if (computerChoice =="scissors"){
            humanTotal++;
        } else if (computerChoice =="paper"){
            compTotal++;
        }
    }

    if (humanChoice == "paper"){
        if (computerChoice  =="paper"){
        } else if (computerChoice =="rock"){
            humanTotal++;
        } else if (computerChoice =="scissors"){
        compTotal++;
        }
    }

    if (humanChoice == "scissors"){
        if (computerChoice  =="scissors"){
        } else if (computerChoice =="paper"){
            humanTotal++;
        } else if (computerChoice =="rock"){
            compTotal++;
        }
    }

    document.getElementById("humanScore").innerHTML = humanTotal;
    document.getElementById("computerScore").innerHTML = compTotal;

}


function compPlay (){
    var compOptions = ['rock', 'paper', 'scissors'];
    var randomChoice = Math.floor(Math.random()*compOptions.length);
    return compOptions[randomChoice]; //<-- Change Here

}

它与innerHTML无关，工作正常，只是分数始终为零。原因是因为测试“ rock”，“ paper”或“ scissors”的if语句均未解析为true，因为计算机选择未匹配“ rock”，“ paper”或“ scissors”，所以抱歉，这是您的职能。