Javascript 8-ball help

JavaScript
1

Hey, I’m new to using Javascript/html and I’m trying to make an 8-ball program to try and learn the basics. Here’s the code:

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://balance3e.com/random.js"></script>

<script type="text/javascript">
function DisplayMessage()
//assumes:
//results:
{
var answer;
answer=RandomOneOf(["Absolutely", "Phenomenaly", "Without a doubt not", "As possible as a snowball's chance in hell", "Perchance yes, perchance no"]);
document.getElementById('outputDiv').innerHTML='The Wizard says: <i> ' +answer+ ' </i>';
}
</script>
<title>Ask the Wizard</title>
</head>

<body>
Ask a question, then click the 8-ball to ask the Wizard your question!
<input type="text"><br>
<img src=8ball.gif
	onclick=
<div id="outputDiv"></div>
</body>
</html>

Here are my 2 questions:

  1. How do I connect RandomOneOf and the output?
  2. Which of the get functions do I use for the onclick event?

Like I said, absolute beginner in Javascript. Any help would be appreciated.

2

Use:
<img src="8ball.gif" onclick="DisplayMessage()">
(Note the quotation marks)

When the image is clicked, the function will execute.

The 8ball.gif file needs to be in the same disk folder as your .html file.

3

Please no - don’t scatter JavaScript throughout the HTML page. Inline event attributes are about the worst way to do it.

Instead, give the 8ball image a unique identifier, and use that to add an event listener.

<img id="8ball" src="8ball.gif">

var 8ball = document.querySelector("#8ball");
8ball.addEventListener("click", DisplayMessage);

This is the more standard practice for adding event behavior.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.