时间戳

首页 > 解决方案 > 如何调整代码，以便在网站加载时出现图像并且猜测是在猜测我希望它猜测的内容？

javascript - 如何调整代码，以便在网站加载时出现图像并且猜测是在猜测我希望它猜测的内容？

问题描述

<!DOCTYPE html>
<html>
    <body>
        <p id="Image"></p>

基本上我在 tryijngto 做什么

标签： javascriptarraysimageloopsif-statement

解决方案

我建议的一种解决方法是将您的逻辑分成两个功能，一个是用户单击以检查他们的答案，另一个是他们单击以查看下一个问题。这将允许您在屏幕上而不是在警报中显示祝贺消息。这是实际操作：

let score = 0;
let questionsAsked = 0;
const button = document.querySelector('button');
const input = document.getElementById('userInput');
const gameScore = document.getElementById('game-score-inner');
gameScore.add = (pts = 1) => gameScore.innerHTML = parseInt(gameScore.textContent) + 1;
gameScore.subtract = (pts = 1) => gameScore.innerHTML = Math.max(parseInt(gameScore.textContent) - 1, 0);
const checkMessage = document.getElementById('check-message');
checkMessage.set = message => checkMessage.innerHTML = message;
checkMessage.clear = message => checkMessage.innerHTML = '';
const options = {
  chad: 'https://via.placeholder.com/600x400/000000/efebe9/?text=Chad',
  bob: 'https://via.placeholder.com/600x400/000000/efebe9/?text=Bob',
  john: 'https://via.placeholder.com/600x400/000000/efebe9/?text=John'
}
function askQuestion() {
  checkMessage.clear();
  input.value = '';
  const optionsNames = Object.values(options);
  const randomPhoto = optionsNames[Math.floor(Math.random() * optionsNames.length)];
  document.getElementById('image').innerHTML = `<img src="${randomPhoto}" id="question-image" width="250" height="250" />`;
  button.setAttribute('onclick','checkAnswer()');
  button.textContent = 'Check Your Answer!';
}
function checkAnswer() {
  const userGuess = options[input.value.toLowerCase()];
  const correctAnswer = document.getElementById('question-image').getAttribute('src');
  if (options[input.value.toLowerCase()] === correctAnswer) {
    checkMessage.set('CONGRATULATIONS!!! YOU GUESSED IT RIGHT');
    gameScore.add();
  } else {
    checkMessage.set('SORRY, IT WAS INCORRECT');
    gameScore.subtract();
  }
  questionsAsked++;
  button.setAttribute('onclick','askQuestion()');
  button.textContent = 'Next Question';
}
askQuestion();
<p id="image"></p>
<p id="game-score">Score: <span id="game-score-inner">0</span></p>
<button onclick="checkAnswer()">Start Game!</button>
<input id="userInput" type="text" />
<p id="check-message"></p>

如果您希望将所有内容保存在一个函数中并为祝贺消息使用警报，您可以通过跟踪当时提出的问题数量来做到这一点，而不是在第一次加载时立即检查答案，如下所示：

let score = 0;
let questionsAnswered = -1;
const imageContainer = document.getElementById('image');
const button = document.querySelector('button');
const input = document.getElementById('user-input');
const gameScore = document.getElementById('game-score-inner');
gameScore.add = (pts = 1) => gameScore.innerHTML = parseInt(gameScore.textContent) + 1;
gameScore.subtract = (pts = 1) => gameScore.innerHTML = Math.max(parseInt(gameScore.textContent) - 1, 0);
const options = {
  chad: 'https://via.placeholder.com/250x250/000000/efebe9/?text=Chad',
  bob: 'https://via.placeholder.com/250x250/000000/efebe9/?text=Bob',
  john: 'https://via.placeholder.com/250x250/000000/efebe9/?text=John'
}
function askQuestion() {
  questionsAnswered++;
  const optionsNames = Object.values(options);
  const randomPhoto = optionsNames[Math.floor(Math.random() * optionsNames.length)];
  if (questionsAnswered) {
    const userGuess = options[input.value.toLowerCase()];
    const correctAnswer = document.getElementById('question-image').getAttribute('src');
    if (options[input.value.toLowerCase()] === correctAnswer) {
      gameScore.add();
      alert('CONGRATULATIONS!!! YOU GUESSED IT RIGHT');
    } else {
      gameScore.subtract();
      alert('SORRY, IT WAS INCORRECT');
    }
    questionsAnswered++;
  }
  imageContainer.innerHTML = `<img src="${randomPhoto}" id="question-image" width="250" height="250" />`;
  input.value = '';
}
askQuestion();
<p id="image"></p>
<p id="game-score">Score: <span id="game-score-inner">0</span></p>
<button onclick="askQuestion()">Check Answer!</button>
<input id="user-input" type="text" />

两种解决方案都可以很好地处理警报，尽管第一个解决方案为您想要在两个问题之间执行的任何功能提供了更大的灵活性。这里要做的另一个主要修复是在检查答案后检查更改图像，并确保askQuestion()在这种情况下在开始时实际使用该功能。我还添加了一些方便的功能gameScore.add()，gameScore.subtract()以方便将来使用。

您可以传入其他整数，例如gameScore.add(2)是否每个人都想要双重加权问题。我还添加了一条Math.max()线以确保分数永远不会低于 0。如果您希望玩家的分数变为负数，可以将其删除。

推荐阅读