用于显示警报消息的JavaScript

Question

所以当用户已经问过一次时，我正试图让我的JavaScript Magic 8球显示alert();消息。我知道我需要if/else声明，但不知道从哪里开始。当问到问题时，我可以正确显示所有内容。只需要if/else声明。

//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

如果您不想重复问题

您需要做的是设置另一个数组（在我的示例中为alreadyAsked），然后每次收到特定问题时，将问题推送到该数组。

要抓住问题，您需要使用question = document.getElementsByName('askme')[0].value;定位元素。需要[0]，因为 document.getElementsByName() 会返回NodeList对象集合。请注意，此声明必须在click事件的内部内发生，因为在页面加载后问题会发生变化。

然后只需检查问题是否已在if (alreadyAsked.indexOf(question) >= 0) { }的辅助数组中。请注意，您需要在此检查后推送到阵列，否则问题将始终在数组中！

使用辅助数组可以检查之前是否遇到任何问题，而不仅仅是前一个问题（如if (question)的情况）。

您现有的代码段将随机答案选项定义为question，但我已将此更改为answer（因为它实际上是这样）。我调用了用户的输入question。请注意，`else条件已更新以反映这种新的命名约定。

//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>

如果您不想重复答案

您需要做的是设置另一个数组（在我的示例中为alreadyAnswered），然后每次收到特定答案时，将答案推送到该数组。

然后只需检查答案是否已在if (alreadyAnswered.indexOf(question) >= 0) { }的辅助数组中。请注意，您需要在此检查后推送到阵列，否则答案将始终在数组中！

使用辅助数组可以检查之前是否遇到任何答案，而不仅仅是前一个答案（如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>

希望这有帮助！ ：）

Answer 2

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