stackoom
  简体   繁体   中英

Javascript and HTML linking

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

Question

I am working on a Rock, Paper, Scissors javascript game. But, when I went to run it, I am having issues getting the HTML and the JS to communicate.

I have three buttons that are supposed to pass a string to the JS, which compares it with a random value that is assigned to the computer-player.

Any help getting this to function is greatly appreciated. Thanks 

 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>

I have updated the code, and the victory statement doesn't update. I can only get it to reach "It's a draw" if I pick Paper as the input. I also want this to run infinitely until the user leaves the page, do I need the loop to do this, or if they select a different picture, will it work fine without the loop. Thank you for the input

2 answers

solution1
 2  2015-10-29 21:41:36

This works in FF. I was able to display all 3 conditions. You didnt set loop to false which created an infinite loop, and the DRAW case introduced a variable that hadn't been declared. And this can certainly be refactored, which i will leave as an exercise for the OP .

First credit on the infinite loop to @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";
    }
}

solution2
 1  2015-10-29 21:33:18

You are missing a variable declaration for catsgame , see the comment from Elliot Rodriguez below and you while loop creates an infinite loop as loop is never set to false , see the comment from 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JavaScript animation not linking with HTML Linking HTML Checkbox to Javascript linking JavaScript to HTML file Javascript not linking to html file Linking JavaScript to my HTML Linking Html files with javascript Linking javascript file to html HTML/JavaScript Linking Dynamically linking html pages with javascript Trouble linking javascript to html button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM