Блог

Главная - Вопросы по программированию - JavaScript выдает неверный вывод

JavaScript выдает неверный вывод

#javascript

#javascript

Вопрос:

Я создаю игру (бумага / ножницы / камень), и в своем последнем разделе я хочу сравнить пользовательский и компьютерный выбор, но по какой-то причине я получаю неверный вывод: когда я нажимаю на кнопку, например, «Камень», а компьютер выбирает «Ножницы», я получаю следующий вывод: ‘Вы выбрали Stone. Компьютер выбрал ножницы, которые вы проиграли! Попробуйте еще раз.’но это неправильно! должно быть на другой стороне. Я также не получаю возврата, когда «Это ничья!»; Не могли бы вы помочь?

 //user choice
var output = document.getElementById("output");
var result = document.getElementById("result");
var count = 3;
var countUser = 0;
var countComputer = 0;
var paper = document.querySelector("#paper header");
paper.addEventListener("click", function() {
  paper.classList.toggle("header-special");
  userChoice = "paper";
  output.innerHTML = "You  Chose Paper";
  compareWithComputer("paper");
});

var scissors = document.querySelector("#scissors header");
scissors.addEventListener("click", function() {
  scissors.classList.toggle("header-special");
  userChoice = "scissors";
  output.innerHTML = "You  Chose Scissors";
  compareWithComputer("scissors");
});

var stone = document.querySelector("#stone header");
stone.addEventListener("click", function() {
  stone.classList.toggle("header-special");
  userChoice = "stone";
  output.innerHTML = "You  Chose Stone";
  compareWithComputer("stone");
});

// Computer choice

function compareWithComputer(userChoice) {
  var computerChoice = Math.floor(Math.random() * 3   1);
  if (computerChoice == 1) {
    computerChoice = "Stone";
  } else if (computerChoice == 2) {
    computerChoice = "Paper";
  } else {
    computerChoice = "Scissors";
  }

  var results = compare(userChoice, computerChoice);

  output.innerHTML  =
    ". Computer Chose "  
    computerChoice  
    results;
  result.innerHTML = "user "   countUser   "computer"   countComputer;
}
// Compare userChoice and computerChoice
var compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    return "It's a tie!";
  }
  if (choice1 === "stone") {
    if (choice2 === "scissors") {
      // stone wins
      countUser  ;
      return "You win!";

    } else {
      // paper wins
      countComputer  ;
      return "You lose! Try again.";

    }
  }
  if (choice1 === "paper") {
    if (choice2 === "stone") {
      // paper wins
      countUser  ;
      return "You win!";


    } else {
      // scissors wins
      countComputer  ;
      return "You lose! Try again.";

    }
  }
  if (choice1 === "scissors") {
    if (choice2 === "stone") {
      // stone wins
      countComputer  ;
      return "You lose! Try again.";

    } else {
      // scissors wins
      countUser  ;
      return "You win!";

    }
  }
}; 
 <!DOCTYPE html>
<div class="start" <h1>Click the button, start the game!</h1>
</div>
<div class="game" id="paper">
  <header>Paper</header>

</div>
<div class="game" id="scissors">
  <header>Scissors</header>
</div>
<div class="game" id="stone">
  <header>Stone</header>
</div>
<div id="output"></div>
<div id="result" </div>

Комментарии:

1. Пожалуйста, предоставьте свой код в виде выполняемого фрагмента.

2. В функции «compareWithComputer» вы возвращаете строки, начинающиеся с верхнего регистра. Они не равны своим аналогам в нижнем регистре (‘Stone’ !== ‘stone’).

Ответ №1:

В функции compareWithComputer вы возвращаете строки, начинающиеся с верхнего регистра. Они не равны своим аналогам в нижнем регистре ( 'Stone' !== 'stone' ) .

Этот код работает:

     //user choice
    var output =document.getElementById("output");
    var result =document.getElementById("result");
    var count=3;
    var countUser=0;
    var countComputer=0;
    var paper = document.querySelector("#paper header");
    paper.addEventListener("click", function() {
    paper.classList.toggle("header-special");
    userChoice = "paper";
    output.innerHTML = "You  Chose Paper";
    compareWithComputer("paper");
    });

    var scissors = document.querySelector("#scissors header");
    scissors.addEventListener("click", function() {
    scissors.classList.toggle("header-special");
    userChoice = "scissors";
    output.innerHTML = "You  Chose Scissors";
    compareWithComputer("scissors");
    });

    var stone = document.querySelector("#stone header");
    stone.addEventListener("click", function() {
    stone.classList.toggle("header-special");
    userChoice = "stone";
    output.innerHTML = "You  Chose Stone";
    compareWithComputer("stone");
    });

    // Computer choice

    function compareWithComputer(userChoice) {
    var computerChoice = Math.floor(Math.random() * 3   1);
    if (computerChoice == 1) {
    computerChoice = "stone";
    } else if (computerChoice == 2) {
    computerChoice = "paper";
    } else {
    computerChoice = "scissors";
    }
 
    var results = compare(userChoice, computerChoice);
  
    output.innerHTML  =
      ". Computer Chose "  
      computerChoice  
      results;
      result.innerHTML="user " countUser "computer" countComputer;
      }
     // Compare userChoice and computerChoice
     var compare = function(choice1, choice2) {
      if (choice1 === choice2) {
     return "It's a tie!";
    }
    if (choice1 === "stone") {
    if (choice2 === "scissors") {
      // stone wins
      countUser  ;
      return "You win!";
      
    } else {
      // paper wins
      countComputer  ;
      return "You lose! Try again.";
      
    }
    }
    if (choice1 === "paper") {
    if (choice2 === "stone") {
      // paper wins
      countUser  ;
      return "You win!";
      
      
    } else {
      // scissors wins
      countComputer  ;
      return "You lose! Try again.";
      
    }
    }
    if (choice1 === "scissors") {
    if (choice2 === "stone") {
      // stone wins
      countComputer  ;
      return "You lose! Try again.";
      
    } else {
      // scissors wins
      countUser  ;
      return "You win!";
      
    }
  }
}; 
     <!DOCTYPE html>
    <div class ="start"
    <h1>Click the button, start the game!</h1>
    </div>
    <div class="game" id="paper">
    <header>Paper</header>

    </div>
    <div class="game" id="scissors">
    <header>Scissors</header>
    </div>
    <div class="game" id="stone">
    <header>Stone</header>
    </div>
    <div id="output"></div>
    <div id="result"</div>

Метки: