亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何讓我的猜測功能在我的猜數字游戲中發揮作用？

如何讓我的猜測功能在我的猜數字游戲中發揮作用？

繁星coding 2021-11-12 16:15:04
我正在用 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>
查看完整描述

3 回答

?
素胚勾勒不出你

TA貢獻1827條經驗 獲得超9個贊

錯誤 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>";

  }

}


查看完整回答
反對 回復 2021-11-12
?
HUX布斯

TA貢獻1876條經驗 獲得超6個贊

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>


查看完整回答
反對 回復 2021-11-12
?
RISEBY

TA貢獻1856條經驗 獲得超5個贊

您的代碼中有兩個問題：


在你的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>";

  }

}


查看完整回答
反對 回復 2021-11-12
  • 3 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號