首頁猿問用 JavaScript...

用 JavaScript 為學校作業創建一個字母猜謎游戲

JavaScript

函數式編程 2022-05-26 17:11:38

所以我一直堅持這個練習太久了，不知道我做錯了什么。我在處理數組和合并循環時遇到了困難。任務是將 10 個字母放入一個數組中，讓用戶至少猜對一個字母。3 次嘗試后告訴用戶他們已經丟失并終止代碼。<!DOCTYPE html><html><head> <title>Exercise 5</title> <link rel="stylesheet" type="text/css" href="css/styles5.css"/></head><body>  <section id="allContent"> <div id="container"> <div class="bar1"></div><div id="bar2"></div> <h1 id="excersize">E x c e r c i c e &ensp;5</h1> <div id="titleBox"> <p id="titlePRG">Enter five words</p> </div> <input type="text" id="textField"> <form> <input type="button" value="Enter" class="button" onclick="getValue()"> </form> <div id="valueReturned"> <p id="returnText"><p> </div> <a href="index6.html"><h3> Next Exercise </h3></a> </div> <img src ="blank-laptop-png-transparent-pictures-free-icons-graphic-transparent-library-laptop-png-4042_3027.png" alt="laptopGraphic"> </section>   <script> function getValue(){ var input = document.getElementById("textField").value; var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] ; var a = letters.indexOf(input); for(var attempts = 0; attempts < 3; attempts++){ if(input == ""){ document.getElementById("valueReturned").innerHTML = "No input!"; }else if( a >= 0){ document.getElementById("valueReturned").innerHTML = "You guessed right!"; break; } }// end of function </script> </body> </html> 因此，如果用戶猜對了，我希望代碼停止運行或停止循環。如果在第一次嘗試時猜錯了，那么它應該顯示一條消息“還剩兩次嘗試！” 如果第二次嘗試時猜測錯誤，則應顯示消息“還剩一次嘗試！” 等等...我現在沒有用 else 語句關閉我的條件，不確定是否需要。我的 For 循環設置不正確嗎？我的 if，else if 條件不正確嗎？我非常需要你們的幫助！

查看完整描述

2 回答

慕田峪9158850

TA貢獻1794條經驗獲得超8個贊

問題是您要為每次嘗試迭代 3 次嘗試。

對于所有嘗試，您需要全局迭代。

換句話說，跟蹤函數之外的嘗試，否則每次調用函數時，您都會將嘗試重置為 3 - 它永遠不會失敗。

這是我對您的代碼的重構，它還修復了一些其他問題并對其進行了優化。

(() => {

let attempts = 3,

input_el = document.getElementById('textField'),

result_el = document.getElementById('valueReturned');

window.getValue = () => {

let input = input_el.value,

letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],

correct = letters.includes(input),

msg;

if (!attempts)

msg = 'No attempts left!';

else if (!input)

msg = "No input!";

else if(!correct) {

attempts--;

switch (attempts) {

case 2:

msg = 'Two tries left!'

break;

case 1:

msg = 'One more try!';

break;

case 0:

msg = 'That was your last try! Get lost!';

break;

}

} else

msg = 'You guessed right!';

result_el.innerHTML = msg;

}

})();

一些注意事項：

指示性地命名你的變量
將您的 JS 與您的 HTML 分開 - 將其放入專用.js文件中。
let這些var天使用
onclick考慮集中式事件處理，而不是通過屬性內聯 JS 。這也意味著我們不必聲明一個全局函數window供您onclick參考。
我們將整個內容包裝在 IIFE（立即調用函數表達式）中，以防止污染全局命名空間。
想想每次事件觸發時不需要復制的內容。我們不需要每次都從 DOM 中獲取對相同元素的引用——讓我們在函數之外進行。
array.includes(val)相當于array.indexOf(val) !== -1。
我還讓用戶無法進行超過 3 次嘗試。

反對回復 2022-05-26

阿晨1998

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

讓我們看看你的邏輯

function getValue(){

var input = document.getElementById("textField").value;

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] ;

var a = letters.indexOf(input);

在這一點上，您打開了一個腳本標簽并聲明了一個函數getValue。然后你用 id 從 html 元素中獲取輸入，用 10 個字母"textField"初始化一個數組，然后搜索，返回它的索引。但是，這會導致輸入僅被讀取一次。然后它將執行您的 for 循環進行 3 次迭代，從而產生潛在的有害錯誤。letterslettersinput

這樣想，

您的功能需要在某個地方啟動。通過將其嵌入到 html 中，它將出現onclick()在輸入下方的按鈕中。這意味著每次調用該函數時，都會讀取一次輸入，并且循環在同一個輸入上運行 3 次。我將首先在您的getValue函數之外創建一個變量——我們將調用它——這attempts將允許我們在每次運行函數時更新變量。然后擺脫 for 循環，并使用條件分支，例如

var attempts = 0;

function getValue(){

var input = document.getElementById("textField").value;

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] ;

var a = letters.indexOf(input);

if (attempts < 3) {

// check if input is right

if (input != "" && a != -1) {

alert("success");

}

attempts += 1;

}

// no else statement needed to terminate the program

// simply don't handle occurrences of attempts greater than 3

}

請評論您不確定的任何內容

反對回復 2022-05-26

2 回答
0 關注
179 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

用 JavaScript 為學校作業創建一個字母猜謎游戲

用 JavaScript 為學校作業創建一個字母猜謎游戲

2 回答

添加回答