Question

目标是运行game.html，以便调用JavaScript并运行rockpapergame.js。使用Chrome浏览器，然后检查，在Sources，我可以查看调试器并在脚本src =＆＃34; rockpapergame.js＆＃34;上逐步执行引用的js的函数，然后逐步浏览rockpapergame.js。但是，我只得到提示：userChoice = prompt（＆＃34;你选择摇滚，纸张还是剪刀？＆＃34;）。

如何将console.log输出返回到HTML5页面？

＆＃13;

// Rock, Paper, Scissors Game //
// rockpapergame.js          //

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if(computerChoice < 0.34) {
    computerChoice = "rock";
}else if (computerChoice <= 0.67) {
    computerChoice = "paper";
}else{
    computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);

var compare = function(choice1, choice2)
{
    if (choice1 === choice2) {
      return "The result is a tie!";
    }else if (choice1 === "rock") {
        if (choice2 === "scissors") {
          return "rock wins";
        }else if (choice1 === "paper") {
            if (choice2 === "rock") {
              return "paper wins";
            }else {
              return "scissors wins";
            }
        }else {
          return "paper wins";
        }
    }
};

compare(userChoice, computerChoice);
// end of rockpapergame.js//

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>A Little Game</title>
    </head>
    <body>
    <div></div>
    <p><b>About this Game</b></p>
    <script src="rockpapergame.js"></script>
    <p>This is a cool game</p>
    </body>
</html>

＆＃13;

Answer 1

遵循两种可能的解决方案。

01）正如其他人在评论中指出的那样，console.log()始终在浏览器控制台中打印结果，而不是在页面的HTML中打印，但您可以更改其行为猴子修补（覆盖）由提供的默认console.log功能。浏览器，一个非常简单的版本可能是：

console.log = function(message) {
    document.getElementById('result').innerHTML = message;
};
console.log('your result');

<div id="result"></div>

PS：我个人不建议您覆盖console.log默认行为。

02）您可以在HTML页面中添加结果的div容器，并使用该DIV显示游戏的结果。

您问题的修改版本：

// Rock, Paper, Scissors Game //
// rockpapergame.js          //

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if(computerChoice < 0.34) {
    computerChoice = "rock";
}else if (computerChoice <= 0.67) {
    computerChoice = "paper";
}else{
    computerChoice = "scissors";
}
document.getElementById('result').innerHTML = "Computer: " + computerChoice;
console.log("Computer: " + computerChoice);

var compare = function(choice1, choice2)
{
    if (choice1 === choice2) {
      return "The result is a tie!";
    }else if (choice1 === "rock") {
        if (choice2 === "scissors") {
          return "rock wins";
        }else if (choice1 === "paper") {
            if (choice2 === "rock") {
              return "paper wins";
            }else {
              return "scissors wins";
            }
        }else {
          return "paper wins";
        }
    }
};

compare(userChoice, computerChoice);
// end of rockpapergame.js//

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>A Little Game</title>
    </head>
    <body>
    <div></div>
    <p><b>About this Game</b></p>
    <script src="rockpapergame.js"></script>
    <p>This is a cool game</p>
    <div id="result"></div>
    </body>
</html>

如何将JavaScript的console.log输出显示到HMTL5页面

1 个答案: