Как сделать так, чтобы моя функция угадывания работала в моей игре с угадыванием чисел? - PullRequest
Новая
       0

Как сделать так, чтобы моя функция угадывания работала в моей игре с угадыванием чисел?

0 голосов
/ 08 октября 2019

Я угадываю игру чисел с HTML, CSS и javascript. Я не могу понять, что я делаю не так с моим JavaScript. Я пробовал несколько вещей, чтобы заставить это работать, но я не могу понять это. Единственная кнопка, над которой я сейчас работаю, это простой режим игры. Некоторые из них будут работать, но кнопка догадки не будет работать. Вот мой код: 

function easy() {
  var easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyDiv').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}
* {
  margin: 0px;
}

#guess {
  padding: 5px;
  border-color: #c3c3c3;
  background: #c3c3c3;
}

input {
  border: 0.5px solid #000000;
  border-radius: 5px;
  outline: none;
  background: #d4d4d4;
}

button {
  border: solid;
  border-color: #000000;
  border-radius: 7.5px;
  padding: 7.5px;
  outline: none;
  cursor: pointer;
}

#easy {
  background: #00ff00;
}

#medium {
  background: #ffff00;
}

#hard {
  background: #ff6600;
}

#insane {
  background: #ff0000;
}

#menu {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #ffffff;
  opacity: 0.9;
  font-family: arial;
}

#header {
  background-color: #ffffff;
  opacity: 0.7;
  width: 100%;
  height: 120px;
  position: relative;
}

#title {
  font-family: arial;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

body {
  background: radial-gradient(#aaaaff, #00003b) no-repeat center center;
  background-size: 100% 100%;
}
<html>
<head>
  <title>Guess the Number</title>
</head>
<body>
  <div id="header">
    <h1 id="title">Guess the Number</h1>
  </div>
  <div id="menu">
    <u><h2>Level Select</h2></u>
    <br>
    <button id="easy" onclick="easy()"><b>Easy</b></button>
    <button id="medium" onclick="medium()"><b>Medium</b></button>
    <button id="hard" onclick="hard()"><b>Hard</b></button>
    <button id="insane" onclick="insane()"><b>Insane</b></button>
  </div>
</body>
</html>

Надеюсь, вы поможете мне с этим. Спасибо! (Мне просто нужна помощь с JavaScript)

Ответы [ 5 ]

1 голос
/ 08 октября 2019

ошибка 1: вы объявили easyNum локальным для easy ().

ошибка 2: вы пытались использовать значение div (easyDiv). 

var easyNum; //change 1

function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyGuess').value == easyNum) { //change 2
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}
1 голос
/ 08 октября 2019

easyNum существует только в функциональном блоке, в котором он был создан. Вам нужно либо сделать ее глобальной переменной, чтобы guessEasy() мог получить к ней доступ, либо передать ее в качестве аргумента guessEasy(), например так: 

"<div ... onclick='guessEasy(" + easyNum + ")' ...></div>"

Что касается других уровней сложности, то вам нужно реализовать функции medium(), hard() и insane(), чтобы заставить остальную часть игры работать. 

function easy() {
  var easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy("+easyNum +")'>Guess!</button></div>";
}

function guessEasy(easyNum) {
  if (document.getElementById('easyGuess').value == easyNum) { // change to 'easyGuess'
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was " + easyNum + ".</h2>";
  }
}
* {
  margin: 0px;
}

#guess {
  padding: 5px;
  border-color: #c3c3c3;
  background: #c3c3c3;
}

input {
  border: 0.5px solid #000000;
  border-radius: 5px;
  outline: none;
  background: #d4d4d4;
}

button {
  border: solid;
  border-color: #000000;
  border-radius: 7.5px;
  padding: 7.5px;
  outline: none;
  cursor: pointer;
}

#easy {
  background: #00ff00;
}

#medium {
  background: #ffff00;
}

#hard {
  background: #ff6600;
}

#insane {
  background: #ff0000;
}

#menu {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #ffffff;
  opacity: 0.9;
  font-family: arial;
}

#header {
  background-color: #ffffff;
  opacity: 0.7;
  width: 100%;
  height: 120px;
  position: relative;
}

#title {
  font-family: arial;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

body {
  background: radial-gradient(#aaaaff, #00003b) no-repeat center center;
  background-size: 100% 100%;
}
<html>
<head>
  <title>Guess the Number</title>
</head>
<body>
  <div id="header">
    <h1 id="title">Guess the Number</h1>
  </div>
  <div id="menu">
    <u><h2>Level Select</h2></u>
    <br>
    <button id="easy" onclick="easy()"><b>Easy</b></button>
    <button id="medium" onclick="medium()"><b>Medium</b></button>
    <button id="hard" onclick="hard()"><b>Hard</b></button>
    <button id="insane" onclick="insane()"><b>Insane</b></button>
  </div>
</body>
</html>
0 голосов
/ 08 октября 2019

В вашем коде есть две проблемы:

  • В вашей функции easyGuess вы проверяете значение easyDiv document.getElementById('easyDiv').value == easyNum, но на самом деле вы хотите проверить значение easyGuess следующим образом: document.getElementById('easyGuess').value == easyNum.
  • Ваша переменная easyNum находится в пределах вашей функции easy. Для этого у вас есть несколько различных опций:

Опция # 1: определить easyNum вне вашей функции easy: 

var easyNum;

function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyGuess').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}

Опция # 2: вызовите функцию easy из функции guessEasy: 

var easy = function() {
  var num = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
  return num;
}

function guessEasy() {
  var easyNum = easy();
  if (document.getElementById('easyGuess').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}

Вариант № 3: как уже предложено здесь другим пользователем StackOverflow, передайте easyNum в guessEasy в качестве аргумента: 

function easy() {
  var easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy("+ easyNum +")'>Guess!</button></div>";
}

function guessEasy(easyNum) {
  if (document.getElementById('easyGuess').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was " + easyNum + ".</h2>";
  }
}
0 голосов
/ 08 октября 2019

Вам необходимо объявить переменную "easyNum" вне функции. как это: 

var easyNum;
function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyDiv').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}
* {
  margin: 0px;
}

#guess {
  padding: 5px;
  border-color: #c3c3c3;
  background: #c3c3c3;
}

input {
  border: 0.5px solid #000000;
  border-radius: 5px;
  outline: none;
  background: #d4d4d4;
}

button {
  border: solid;
  border-color: #000000;
  border-radius: 7.5px;
  padding: 7.5px;
  outline: none;
  cursor: pointer;
}

#easy {
  background: #00ff00;
}

#medium {
  background: #ffff00;
}

#hard {
  background: #ff6600;
}

#insane {
  background: #ff0000;
}

#menu {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #ffffff;
  opacity: 0.9;
  font-family: arial;
}

#header {
  background-color: #ffffff;
  opacity: 0.7;
  width: 100%;
  height: 120px;
  position: relative;
}

#title {
  font-family: arial;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

body {
  background: radial-gradient(#aaaaff, #00003b) no-repeat center center;
  background-size: 100% 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>
<head>
  <title>Guess the Number</title>
</head>
<body>
  <div id="header">
    <h1 id="title">Guess the Number</h1>
  </div>
  <div id="menu">
    <u><h2>Level Select</h2></u>
    <br>
    <button id="easy" onclick="easy()"><b>Easy</b></button>
    <button id="medium" onclick="medium()"><b>Medium</b></button>
    <button id="hard" onclick="hard()"><b>Hard</b></button>
    <button id="insane" onclick="insane()"><b>Insane</b></button>
  </div>
</body>
</html>
0 голосов
/ 08 октября 2019

Вам нужно поставить var easyNum; вне функции, чтобы ее можно было использовать глобально. 

var easyNum;

function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyDiv').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...