所以我一直坚持这个练习太久了，不知道我做错了什么。我在处理数组和合并循环时遇到了困难。任务是将 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
TA贡献1794条经验 获得超7个赞
问题是您要为每次尝试迭代 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
TA贡献2037条经验 获得超6个赞
让我们看看你的逻辑
<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
}
请评论您不确定的任何内容
添加回答
举报
0/150
提交
取消