Magic 8 Ball with HTML/Javascript

Question

I am trying to create a "Magic 8 Ball" with HTML/Javascript. I have been tried to fiddle with the code and I am going to continue to add/play with things, but if anyone can help it would be greatly appreciated. If I figure it out I will update the post, however I am currently stuck at this point.

The point of the program is that a user can type a question, then whenever the 8-Ball image gets clicked one of the random answers will appear below the 8-ball image.

I think my error is in the "response=RandomOneOf....." lines.

<!doctype html>
<!-- =================================================== -->
<html>
    <head>
        <title> Magic-8 Ball </title>
        <script type="text/javascript" src="random.js">
            function GenerateAnswer()
            {
                response = RandomOneOf([
                    'It is certain',
                    'Without a doubt',
                    'Most likely',
                    'Yes',
                    'Reply hazy try again',
                    'Ask again later',
                    'My reply is no',
                    'No',
                    'Very doubtful',
                    ]);
                document.getElementById('magicBallButton').onclick = function GenerateAnswer();
                document.getElementById('outputDiv').innerHTML = 
                    + response +;

            }
        </script>
    </head>
    <body>
        <div style="text-align:center">
            <h1>Magic 8-Ball (Mattel, Inc.)</h1>
            <br>
            Enter a question below, then click on the Magic 8-Ball to recieve its wisdom.
            <br>
            <input type="text" id="questionBox" size=100 value=''>
            <br>
            <br>
            <input type="image" src="8ball.png" alt="magicBall" id="magicBallButton" onclick="GenerateAnswer()";>
        </div>
        <div id="outputDiv"> </div>
    </body>
</html>

Answer 1

You have a number of problems with your script:

You are calling an external script with <script src> and then adding inline script below that. External scripts should have an independent <script> tag.
You are calling GenerateAnswer on click of #magicBallButton
( <input id="magicBallButton" onclick="GenerateAnswer()" ), but also attempting to do so with document.getElementById('magicBallButton').onclick = function GenerateAnswer(); . Not only is this redundant, but you shouldn't specify function in a function evocation .
document.getElementById('outputDiv').innerHTML = +response + ; is horribly invalid syntax. You're looking for document.getElementById('outputDiv').innerHTML = response .
RandomOneOf an array appears to be undefined. You can get a random response from the array with response = responses[Math.floor(Math.random() * responses.length)]; . Note that I removed the brackets surrounding the original array, and renamed it to responses (because it contains all of the possible responses, not just the desired one).

Here's a working example, with all of the above points corrected:

 function GenerateAnswer() { responses = [ 'It is certain', 'Without a doubt', 'Most likely', 'Yes', 'Reply hazy try again', 'Ask again later', 'My reply is no', 'No', 'Very doubtful', ]; response = responses[Math.floor(Math.random() * responses.length)]; document.getElementById('outputDiv').innerHTML = response; }

 <body> <div style="text-align:center"> <h1>Magic 8-Ball (Mattel, Inc.)</h1> <br> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. <br> <input type="text" id="questionBox" size=100 value=''> <br> <br> <input type="image" src="8ball.png" alt="magicBall" id="magicBallButton" onclick="GenerateAnswer()" ;> </div> <div id="outputDiv"> </div> </body>

Hope this helps! :)

Magic 8 Ball with HTML/Javascript

Question

1 answers

solution1
0 ACCPTED 2017-10-26 02:02:21

Magic 8 Ball with HTML/Javascript

Question

1 answers

solution1 0 ACCPTED 2017-10-26 02:02:21

solution1
0 ACCPTED 2017-10-26 02:02:21