Question

我需要创建w魔术八球模拟，用户可以询问具体问题，对于同一个问题，它将始终返回相同的答案。比如，当用户输入Will我会变得富有？时，我希望图像从../Images/eightBallNo.png读取不需要出现的图像。目前，我所拥有的代码在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>

图像串：Magic 8 Ball Simulation

0 个答案: