堆栈内存溢出
  繁体   English   中英

Javascript和HTML链接

[英]Javascript and HTML linking

 原文  2015-10-29 21:25:54  1   2    javascript/ html

问题描述

我正在研究Rock，Paper，Scissors javascript游戏。 但是，当我去运行它时，我在使HTML和JS进行通信时遇到问题。

我有三个应该将字符串传递给JS的按钮，该字符串将其与分配给计算机播放器的随机值进行比较。

非常感谢您对此功能的帮助。 谢谢 

 var choicePrompt = "Please, pick your poison."; var victory = "Congrats, you Won!"; var defeat = "Sorry, you Lost"; var catsgame = "It's a draw!"; function run(userIn) { var loop = true; var winner; var scoreCount = 0; document.getElementById("prompt"); while (loop) { compChoice = Math.random(); compChoice = stringify(compChoice); userChoice = userIn; if (compChoice === "SOMETHING WENT WRONG") { document.getElementById("prompt").alert("JAVASCRIPT ERROR"); } winner = victor(userIn, compChoice); switch (winner) { case "WIN": scoreCount += 1; document.getElementById("score") = "Score: " + scoreCount; document.getElementById("prompt").innerHTML = victory; break; case "LOSS": scoreCount -= 1; document.getElementById("score") = scoreCount; document.getElementById("prompt").innerHTML = defeat; break; case "DRAW": document.getElementById("prompt").innerHTML = catsgame; break; case "ERROR": default: document.getElementById("prompt").innerHTML = "Something went wrong"; } loop = false; } } function stringify(float) { if (float <= 0.33) { return "ROCK"; } else if (float > 0.33 && float <= 0.66) { return "PAPER"; } else if (float > 0.66) { return "SCISSORS"; } else { return "SOMETHING WENT WRONG"; } } function victor(user, comp) { switch (user) { case "ROCK": switch (comp) { case "ROCK": return "DRAW"; break; case "SCISSORS": return "WIN"; break; case "PAPER": return "LOSS"; break; default: return "ERROR"; } break; case "PAPER": switch (comp) { case "ROCK": return "WIN"; break; case "SCISSORS": return "LOSS"; break; case "PAPER": return "DRAW"; break; default: return "ERROR"; } break; case "SCISSORS": switch (comp) { case "ROCK": return "LOSS"; break; case "SCISSORS": return "DRAW"; break; case "PAPER": return "WIN"; break; default: return "ERROR"; } break; default: return "ERROR"; } } 
  <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Rock Paper Scissors</title> <link rel="stylesheet" href="../assets/css/hmwk-3.css" /> <script source src="play.js"></script> </head> <header> <h2>Rock, Paper, Scissors</h2> <nav> <a href="index.html">Homework Home</a> | <a href="welcome.html"> Play Rock, Paper, Scissors</a> </nav> </header> <body> <h3 id="prompt">Please, pick your poison.</h3><br> <h3 id="score">Score: 0</h3> <table> <td> <input type="image" src="../assets/hmwk-3/rock.png" onclick="run('ROCK')" /> </td> <td> <input type="image" src="../assets/hmwk-3/paper.png" onclick="run('PAPER')" /> </td> <td> <input type="image" src="../assets/hmwk-3/scissors.png" onclick="run('SCISSORS')" /> </td> </table> </body> </html>

我已经更新了代码，并且胜利声明没有更新。 如果选择“纸张”作为输入，则只能达到“这是平局”。 我还希望它无限运行，直到用户离开页面为止，是否需要循环执行此操作，或者如果他们选择其他图片，则无需循环就可以正常工作。 谢谢你的反馈

2 个解决方案

解决方案1
 2  2015-10-29 21:41:36

这在FF中有效。 我能够显示所有3个条件。 您没有将loop设置为false，从而创建了无限循环，而DRAW案例引入了一个尚未声明的变量。 这当然可以重构， 我将作为OP的练习留给我们 。

无限循环中的第一功劳@ pL4Gu33。 

var choicePrompt = "Please, pick your poison.";
var victory = "Congrats, you Won!";
var defeat = "Sorry, you Lost";
var catsgame = "Kiss yer sister";

function run(userIn) {
    var loop = true;
    var winner;
    var scoreCount = 0;

    while (loop)
    {
        compChoice = Math.random();
        compChoice = stringify(compChoice);
        userChoice = userIn;

        if (compChoice === "SOMETHING WENT WRONG")
        {
            document.getElementById("prompt").alert("JAVASCRIPT ERROR");
            loop = false;
        }

        winner = victor(userIn, compChoice);

        switch (winner) {
            case "WIN":
                document.getElementById("prompt").innerHTML = victory;
                loop = false;
                break;

            case "LOSS":
                document.getElementById("prompt").innerHTML = defeat;
                loop = false;
                break;

            case "DRAW":
                document.getElementById("prompt").innerHTML = catsgame;
                loop = false;
                break;

            case "ERROR":
                loop = false;
                break;
            default:
                loop = false;
                document.getElementById("prompt").innerHTML = "Something went wrong";
        }
    }
}

function stringify(float) {
    if (float <= 0.33)
    {
        return "ROCK";
    }
    else if (float > 0.33 && float <= 0.66)
    {
        return "PAPER";
    }
    else if (float > 0.66)
    {
        return "SCISSORS";
    }
    else
    {
        return "SOMETHING WENT WRONG";
    }
}

function victor(user, comp) {
    switch (user)
    {
        case "ROCK":
            switch (comp)
            {
                case "ROCK":
                    return "DRAW";
                    break;
                case "SCISSORS":
                    return "WIN";
                    break;
                case "PAPER":
                    return "LOSS";
                    break;
                default:
                    return "ERROR";
            }
            break;
        case "PAPER":
            switch (comp)
            {
                case "ROCK":
                    return "WIN";
                    break;
                case "SCISSORS":
                    return "LOSS";
                    break;
                case "PAPER":
                    return "DRAW";
                    break;
                default:
                    return "ERROR";
            }
            break;
        case "SCISSORS":
            switch (comp)
            {
                case "ROCK":
                    return "LOSS";
                    break;
                case "SCISSORS":
                    return "DRAW";
                    break;
                case "PAPER":
                    return "WIN";
                    break;
                default:
                    return "ERROR";
            }
            break;
        default:
            return "ERROR";
    }
}

解决方案2
 1  2015-10-29 21:33:18

您缺少catsgame的变量声明，请参阅下面的Elliot Rodriguez的注释，而while循环会创建一个无限循环，因为loop从未设置为false ，请参阅pL4Gu33的注释： 

 var choicePrompt = "Please, pick your poison."; var victory = "Congrats, you Won!"; var defeat = "Sorry, you Lost"; var catsgame = "It is a draw"; //added to the code, see Elliot Rodriguez' answer function run(userIn) { var loop = true; var winner; var scoreCount = 0; while (loop) { compChoice = Math.random(); compChoice = stringify(compChoice); userChoice = userIn; if (compChoice === "SOMETHING WENT WRONG") { document.getElementById("prompt").alert("JAVASCRIPT ERROR"); } winner = victor(userIn, compChoice); switch (winner) { case "WIN": document.getElementById("prompt").innerHTML = victory; break; case "LOSS": document.getElementById("prompt").innerHTML = defeat; break; case "DRAW": document.getElementById("prompt").innerHTML = catsgame; break; case "ERROR": default: document.getElementById("prompt").innerHTML = "Something went wrong"; } loop = false;//terminate loop, see comment by @pL4Gu33. } } function stringify(float) { if (float <= 0.33) { return "ROCK"; } else if (float > 0.33 && float <= 0.66) { return "PAPER"; } else if (float > 0.66) { return "SCISSORS"; } else { return "SOMETHING WENT WRONG"; } } function victor(user, comp) { switch (user) { case "ROCK": switch (comp) { case "ROCK": return "DRAW"; break; case "SCISSORS": return "WIN"; break; case "PAPER": return "LOSS"; break; default: return "ERROR"; } break; case "PAPER": switch (comp) { case "ROCK": return "WIN"; break; case "SCISSORS": return "LOSS"; break; case "PAPER": return "DRAW"; break; default: return "ERROR"; } break; case "SCISSORS": switch (comp) { case "ROCK": return "LOSS"; break; case "SCISSORS": return "DRAW"; break; case "PAPER": return "WIN"; break; default: return "ERROR"; } break; default: return "ERROR"; } } 
 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Rock Paper Scissors</title> <link rel="stylesheet" href="assets/css/main.css" /> <script source src="play.js"></script> </head> <header> <h2>Rock, Paper, Scissors</h2> <nav> <a href="index.html">Homework Home</a> | <a href="welcome.html"> Play Rock, Paper, Scissors</a> </nav> </header> <body> <h3 id="prompt" /> <table> <td> <input type="image" src="../assets/hmwk-3/rock.png" onclick="run('ROCK')" /> </td> <td> <input type="image" src="../assets/hmwk-3/paper.png" onclick="run('PAPER')" /> </td> <td> <input type="image" src="../assets/hmwk-3/scissors.png" onclick="run('SCISSORS')" /> </td> </table> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript 动画未与 HTML 链接 将HTML复选框链接到Javascript 将 JavaScript 链接到 HTML 文件 Javascript 未链接到 html 文件 将JavaScript链接到我的HTML 用html链接HTML文件 将javascript文件链接到html HTML / JavaScript链接 使用javascript动态链接html页面 无法将javascript链接到html按钮
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM