用 JavaScript 为学校作业创建一个字母猜谜游戏
所以我一直坚持这个练习太久了，不知道我做错了什么。我在处理数组和合并循环时遇到了困难。
任务是将 10 个字母放入一个数组中，让用户至少猜对一个字母。3 次尝试后告诉用户他们已经丢失并终止代码。
<!DOCTYPE html>
<html>
<head>
<title>Exercise 5</title>
<link rel="stylesheet" type="text/css" href="css/styles5.css"/>
</head>
<body>
<!--E X C E R S I S E 5 !-->
<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  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>
<!--E N D O F E X C E R c I c E 5 !-->
<!-- S C R I P T I N G !-->
<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
问题是您要为每次尝试迭代 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 次尝试。 -
阿晨1998
让我们看看你的逻辑<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);在这一点上，您打开了一个脚本标签并声明了一个函数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}请评论您不确定的任何内容
随时随地看视频慕课网APP
相关分类
JavaScript