JavaScript 谜语游戏：输入验证不正确总是返回正确，如何修复？

Question

这个基本的谜语游戏向玩家展示一系列对象中的随机谜语，并提示他们输入答案。但是，输入验证存在问题，导致错误的答案被接受为正确的答案。

我尝试检查语法错误，如果我的 if 语句中有任何错误，并确保输入验证是否正确，但没有运气。我是 JavaScript 新手

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Riddle Game</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="riddleStyles.css">
  </head>
  <body>
    <!-- heading section -->
    <h1 class="headingOne">Riddle Game</h1>


    <!-- riddle appears here -->
    <p class="theRiddle"></p>

    <!-- answer section -->
    <div class="riddleSection">
      <input class="answer-section" placeholder="Enter your answer">
      <button class="submitBtn">Submit</button>
      <button class="startBtn">Start Game</button>
    </div>

    <div class="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="riddleScript.js" async defer></script>
  </body>
</html>

CSS

.riddleSection {
  height: 100%;
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.answer-section{
 
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 30px;
}

.answer-section input::placeholder {
  color: #999; 
  font-style: italic;
  text-align: center;
}

.submitBtn, .startBtn{
  width: 120px;
  height: 40px;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  background-color: lightblue;
}

.startBtn:hover, .submitBtn:hover{
  background-color: dimgray;
}
.theRiddle{
  margin-top: 80px;

  text-align: center;
  letter-spacing: 5px;
  font-size: 30px;
}

.headingOne{
  margin: 0;
  text-align: center;
  letter-spacing: 9px;
  font-size: 80px;
}

.result{

  text-align: center;
  letter-spacing: 5px;
  font-size: 50px;

}

javascript


$(document).ready(function() {
  let riddles = [
    {
      question: 'What word contains all of the twenty-six letters?',
      answer: 'alphabet'
    },
    {
      question: 'Which word in the dictionary is spelled incorrectly?',
      answer: 'incorrectly'
    },
    {
      question: 'What color can you eat?',
      answer: 'orange'
    },

    {
      question: 'What has a head, a tail, is brown, and has no legs?',
      answer: 'penny'
    },
    {
      question: 'I’m tall when I’m young, and I’m short when I’m old. What am I?',
      answer: 'candle'
    },
    {
      question: 'What can travel around the world while staying in a corner?',
      answer: 'stamp'
    },
    {
      question: 'What has keys but can’t open locks?',
      answer: 'piano'
    },
    {
      question: 'What has one eye but can’t see?',
      answer: 'needle'
    }
  
  ];

  $('.startBtn').on('click', function() {
    // Select and display a random riddle
    let selectedRiddle = riddles[Math.floor(Math.random() * riddles.length)];
    $('.theRiddle').text(selectedRiddle.question);
    $('.result').empty(); 
  });

  $('.submitBtn').on('click', function() {
    let playerGuess = $('.answer-section').val();

    if (playerGuess === '') {
      $('.result').text('Please guess or enter "quit" to exit.');
    } else {
      let selectedRiddle = $('.theRiddle').text();

      if (playerGuess.toLowerCase() === 'quit') {
        $('.result').text('Thanks for playing! Goodbye.');
        $('.theRiddle').empty();
      } else if (playerGuess.toLowerCase() !== selectedRiddle.answer) {
        $('.result').text('Incorrect answer. Try again.');
      } else (playerGuess.toLowerCase() === selectedRiddle.answer)
        $('.result').text('CORRECT! You win!\nThe answer is: ' + playerGuess);
        $('.theRiddle').empty();
      }
    
    }
  );
});

Answer 1

你这样做是为了获胜：

 else if (playerGuess.toLowerCase() !== selectedRiddle.answer) {

但就在它上面你打电话

let selectedRiddle = $('.theRiddle').text();

所以

selectedRiddle

只保留问题，而不是答案。

您可以使用

riddles.find

从原始数组中找到您需要的答案：

let selectedRiddle = riddles.find(r => r.question === 
$('.theRiddle').text());

我已经恢复了 if/else 逻辑
- 如果匹配，则答案正确
- ```
else
```
  这是不正确的不需要
```
!==
```

let riddles = [{question: 'What word contains all of the twenty-six letters?', answer: 'alphabet' }, {question: 'Which word in the dictionary is spelled incorrectly?', answer: 'incorrectly' }, {question: 'What color can you eat?', answer: 'orange' }, {question: 'What has a head, a tail, is brown, and has no legs?', answer: 'penny' }, {question: 'I’m tall when I’m young, and I’m short when I’m old. What am I?', answer: 'candle' }, {question: 'What can travel around the world while staying in a corner?', answer: 'stamp' }, {question: 'What has keys but can’t open locks?', answer: 'piano' }, {question: 'What has one eye but can’t see?', answer: 'needle' } ];

$('.startBtn').on('click', function() {
    // Select and display a random riddle
    let selectedRiddle = riddles[Math.floor(Math.random() * riddles.length)];
    $('.theRiddle').text(selectedRiddle.question);
    $('.result').empty(); 
});

$('.submitBtn').on('click', function() {
    let playerGuess = $('.answer-section').val();
    
    if (playerGuess === '') {
      $('.result').text('Please guess or enter "quit" to exit.');
    } else {
      let selectedRiddle = riddles.find(r => r.question === $('.theRiddle').text());
      if (playerGuess.toLowerCase() === 'quit') {
        $('.result').text('Thanks for playing! Goodbye.');
        $('.theRiddle').empty();
      } else if (playerGuess.toLowerCase() === selectedRiddle.answer) {
        $('.result').text('CORRECT! You win!\nThe answer is: ' + playerGuess);
        $('.theRiddle').empty();
      } else {
        $('.result').text('Incorrect answer. Try again.');
      }
    } 
});

.riddleSection {
  height: 100%;
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.answer-section{
 
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 30px;
}

.answer-section input::placeholder {
  color: #999; 
  font-style: italic;
  text-align: center;
}

.submitBtn, .startBtn{
  width: 120px;
  height: 40px;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  background-color: lightblue;
}

.startBtn:hover, .submitBtn:hover{
  background-color: dimgray;
}
.theRiddle{
  margin-top: 80px;

  text-align: center;
  letter-spacing: 5px;
  font-size: 30px;
}

.headingOne{
  margin: 0;
  text-align: center;
  letter-spacing: 9px;
  font-size: 80px;
}

.result{

  text-align: center;
  letter-spacing: 5px;
  font-size: 50px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Riddle Game</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="riddleStyles.css">
  </head>
  <body>
    <!-- heading section -->
    <h1 class="headingOne">Riddle Game</h1>


    <!-- riddle appears here -->
    <p class="theRiddle"></p>

    <!-- answer section -->
    <div class="riddleSection">
      <input class="answer-section" placeholder="Enter your answer">
      <button class="submitBtn">Submit</button>
      <button class="startBtn">Start Game</button>
    </div>

    <div class="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="riddleScript.js" async defer></script>
  </body>
</html>

JavaScript 谜语游戏：输入验证不正确总是返回正确，如何修复？

问题描述投票：0回答：1

1个回答

最新问题

JavaScript 谜语游戏：输入验证不正确总是返回正确，如何修复？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1