个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
目标是运行 game.html，以便它调用 JavaScript 并运行 rockpapergame.js。使用 Chrome 浏览器，然后检查，在源代码中，我可以查看调试器并在脚本 src="rockpapergame.js"处跳过引用 js 的函数，然后逐步执行 rockpapergame.js。但是，我只得到以下提示:userChoice = prompt("Do you choose rock, paper or scissors?").
如何将 console.log 输出返回到 HTML5 页面？
// 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//<!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>最佳答案
以下两种可能的解决方案。
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 - 如何将 JavaScript 的 console.log 输出显示到 HMTL5 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40242595/
26
4
0
问题: date_list 是一个空列表。 不应为空，因为列表长度应等于 oct 和 filing_type_list 的列表长度。 我做了什么: 搜索拼写错误。 尝试了不同的公司(例如 REXAHN
我从我的 API 中得到一个完整的 HTML 页面作为一个字符串，包含 css(内联以及 header )和 javascript，看起来像这样: . . . 没有外部文件，只有一个完整的 H
我是一名优秀的程序员,十分优秀！