JavaScript to Display Alert Message

Question

So I'm trying to make my JavaScript Magic 8 ball display an alert(); message when the user already asked it once. I know I need an if/else statement, but not sure where to start. I have everything to display correctly when a question is asked. Just need the if/else statement.

//Create an array for you responses. Remember, it's [0-14].
var responses = [
  "Ask again later...",
  "Yes",
  "No",
  "It appears to be so.",
  "Reply is hazy, please try again.",
  "Yes, definitely.",
  "What is it you really want to know?",
  "Outlook is good.",
  "My sources say no.",
  "Signs point to yes.",
  "Don't count on it!",
  "Cannot predict now.",
  "As I see it, yes.",
  "Better not tell you now.",
  "Concentrate and ask again"
]

//Create a variable for your user's input or question.
var question;

//Display the output.
document.getElementById("submit").onclick = function() {
  question = responses[Math.floor(Math.random() * responses.length)];
  document.getElementById("answer").innerHTML = question;
};

<h1>Magic 8 Ball</h1>
<p>What would you like to know?</p>

<input type="text" name="askme" placeholder="Enter a question...">
<br />
<br />
<button id="submit">Ask the 8 Ball</button>

<br />
<br />

<h2>The 8 Ball says:</h2>
<p id="answer"></p>

Answer 1

If you want no duplicate questions

What you need to do is set up another array (in my example, alreadyAsked), and then every time you receive a particular question, push the question to that array.

To grab the question asked, you need to target the element with question = document.getElementsByName('askme')[0].value;. The [0] is needed because document.getElementsByName() returns a NodeList collection of objects. Note that this declaration must occur inside of the click event, as the question will change after page load.

Then simply check if the question is already in that secondary array with if (alreadyAsked.indexOf(question) >= 0) { }. Note that you'll need to push to the array after this check, or else the question will always be in the array!

Making use of a secondary array allows you to check if any question has been encountered before, not just the immediately preceding question (as would be the case with if (question)).

Your existing snippet defines the random answer selection as question, but I've changed this to be called answer (as that is what it actually is). I've called the user's input question. Note that the `else condition has been updated to reflect this new naming convention.

//Create an array for you responses. Remember, it's [0-14].
var responses = [
  "Ask again later...",
  "Yes",
  "No",
  "It appears to be so.",
  "Reply is hazy, please try again.",
  "Yes, definitely.",
  "What is it you really want to know?",
  "Outlook is good.",
  "My sources say no.",
  "Signs point to yes.",
  "Don't count on it!",
  "Cannot predict now.",
  "As I see it, yes.",
  "Better not tell you now.",
  "Concentrate and ask again"
];

// Set up a secondary array for questions that have already been asked.
var alreadyAsked = [];

//Create a variable for your user's input or question.
var question;

//Display the output.
document.getElementById("submit").onclick = function() {
  question = document.getElementsByName('askme')[0].value;
  answer = responses[Math.floor(Math.random() * responses.length)];
  if (alreadyAsked.indexOf(question) >= 0) {
    alert('You attempted to say "' + question + '", but you already asked that!');
  } else {
    document.getElementById("answer").innerHTML = answer;
  }
  alreadyAsked.push(question);
};

<h1>Magic 8 Ball</h1>
<p>What would you like to know?</p>

<input type="text" name="askme" placeholder="Enter a question...">
<br />
<br />
<button id="submit">Ask the 8 Ball</button>

<br />
<br />

<h2>The 8 Ball says:</h2>
<p id="answer"></p>

If you want no duplicate answers

What you need to do is set up another array (in my example, alreadyAnswered), and then every time you receive a particular answer, push the answer to that array.

Then simply check if the answer is already in that secondary array with if (alreadyAnswered.indexOf(question) >= 0) { }. Note that you'll need to push to the array after this check, or else the answer will always be in the array!

Making use of a secondary array allows you to check if any answer has been encountered before, not just the immediately preceding answer (as would be the case with if (question)).

//Create an array for you responses. Remember, it's [0-14].
var responses = [
  "Ask again later...",
  "Yes",
  "No",
  "It appears to be so.",
  "Reply is hazy, please try again.",
  "Yes, definitely.",
  "What is it you really want to know?",
  "Outlook is good.",
  "My sources say no.",
  "Signs point to yes.",
  "Don't count on it!",
  "Cannot predict now.",
  "As I see it, yes.",
  "Better not tell you now.",
  "Concentrate and ask again"
];

// Set up a secondary array for answers that have already been given.
var alreadyAnswered = [];

//Create a variable for your user's input or question.
var question;

//Display the output.
document.getElementById("submit").onclick = function() {
  question = responses[Math.floor(Math.random() * responses.length)];
  if (alreadyAnswered.indexOf(question) >= 0) {
    alert('I attempted to say "' + question + '", but I already answered that!');
  } else {
    document.getElementById("answer").innerHTML = question;
  }
  alreadyAnswered.push(question);
};

<h1>Magic 8 Ball</h1>
<p>What would you like to know?</p>

<input type="text" name="askme" placeholder="Enter a question...">
<br />
<br />
<button id="submit">Ask the 8 Ball</button>

<br />
<br />

<h2>The 8 Ball says:</h2>
<p id="answer"></p>

Hope this helps! :)

Answer 2

if (question) {
  alert("already asked");
} else {
  // existing logic here
}