0

我需要创建 w 魔术八球模拟，用户可以在其中提出特定问题，并且对于相同的问题，它总是会返回相同的答案。就像，当用户输入 Will I be rich? 时，我希望图像从 ../Images/eightBallNo.png 中读取 no 该图像需要出现。目前，我的代码在 Chrome 控制台中没有显示错误，但它不起作用。有什么我做错了吗？

<!DOCTYPE html>
  <html lang="en">
    <head>

    <title>Project 4: Consistent</title>
    <!-- This part is the function to create my magic eight ball that will randomly give a result, but for certain questions,
    it will provide the same annswer always to fool their minds. -->
    <style>
        #answerImages {
            bachground-color: white;
            height: 100 px;
            width: 300 px;
            text-align: center;
            padding: 60 px;
            margin: 30 px;
            corner-radius: 10 px;
        }
    </style>
    <script>
        // empty cache to use
        var answerMap = {}
        // array of your images
        var images = ['eightBallYes.png', 'eightBallNo.png', 'eightBallMillionYears.png', 'eightBallAskLater.png', 'eightBallReally.png'];

        function eightBall() {
            var answer = document.getElementById("answerBox").value;
            answer = answer.toLowerCase();

            if (answer.search(/[r]/) > -1 ) {
                var yes = '../Images/eightBallYes.png' 
                return yes;
            }

            if (answer.search(/[m]/) > -1 ) {
                var no = '../Images/eightBallNo.png' 
                return no;
            }


            else {
            var randomIndex = Math.floor(Math.random() * images.length);
            imageToUse = images[randomIndex];
            answerMap[answer] = imageToUse;
        }
        }


        window.onload = alert('Welcome to my Project 4')

    </script>
</head>
<body>
<body style="background:#EEEE17">
    <!-- This part of the page will simulate a magic eight ball that will provide at least 4 answers.
    When certain questions are asked, it will return the same answers. This is honestly a pretty cool project to work on. -->

    <div style="text-align:center">
        <h1>Project 4: Booyah!</h1>
        <img src="../images/eightBallTemplate.png" >
        <h2>Magic 8-Ball Game</h2>
        <!-- The following code was borrowed from http://www.w3schools.com/html_forms.asp -->

        <input type="text" id="answerBox" value="Please ask a question">
        <input type="button" value="Submit for Magical Results" onclick='eightBall()'/>

        <!-- Choose Random Answer -->

        <!--Display my Answer -->
        <div id="myOutput"></div>

        <hr>

        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/mac.html">Old MacDonald In-Class Activity</a>
        <br>
        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/paramString.html">Parameter In-Class Activity</a>
        <br>
        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/isPrimeLight-jQuery.html">jQuery In-Class Activity</a>
        <footer>

            <p>
                &copy; Copyright  by Alan Sylvestre
            </p>
        </footer>
    </div>
</body>

4

0 回答 0