堆棧內存溢出
  簡體   English   中英

如何讓我的猜測 function 在我的猜數字游戲中起作用？

[英]How do I make my guess function work in my guess the number game?

 原文  2019-10-08 00:56:07  5   5    javascript/ html/ css/ function

問題描述

我正在用 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
 1  2019-10-08 01:02:29

easyNum僅存在於創建它的 function 塊中。您需要將其設為全局變量以便guessEasy()可以訪問它，或者將其作為參數傳遞給guessEasy() ，如下所示：

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

至於您的其他難度級別，您可以自行實現medium() 、 hard()和insane()函數以使游戲的 rest 正常工作。 

 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>

解決方案2
 1  2019-10-08 01:18:55

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

解決方案3
 0  2019-10-08 01:03:14

你需要把var easyNum; 在 function 之外，以便它可以在全球范圍內使用。

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>";
  }
}

解決方案4
 0  2019-10-08 01:04:47

您需要在 function 之外聲明“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>

解決方案5
 0  2019-10-08 01:05:53

您的代碼中有兩個問題：

  • 在您的easyGuess function 中，您檢查 easyDiv 值document.getElementById('easyDiv').value == easyNum ，但實際上您想像這樣檢查 easyGuess 值： document.getElementById('easyGuess').value == easyNum 。
  • 您的變量easyNum的范圍為您的 function easy 。 為此，您有幾個不同的選擇：

選項 #1：在您的easy function 之外定義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('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：從您的guessEasy function中調用您的easy function： 

 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>"; } }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 簡單猜猜我的Java數字游戲 我怎么猜JavaScript中的數字游戲不起作用？ 如何使我的猜測密碼代碼循環工作？ 在我的 Javascript 猜數字游戲中添加一個猜測循環 《猜數字》JS游戲function問題 冷暖游戲——我怎樣才能讓隨機數在每次用戶在 JavaScript 中輸入猜測數時不改變。 猜測答案沒有限制 Javascript猜測數字游戲不起作用 我正在猜測數字項目，但我的 if else 似乎無法正常工作。 我究竟做錯了什么？ 在學校並試圖創造經典的猜數字游戲。 我做錯了什么？ 如何跟蹤 JavaScript 猜數字游戲中的嘗試
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM