用JavaScript为学校作业创建字母猜测游戏_Javascript_Arrays_Loops_For Loop

用JavaScript为学校作业创建字母猜测游戏

javascript arrays loops for-loop

用JavaScript为学校作业创建字母猜测游戏,javascript,arrays,loops,for-loop,Javascript,Arrays,Loops,For Loop,所以我在这个练习上坚持太久了，不知道我做错了什么。我在使用数组和合并循环时遇到了困难任务是将10个字母放入一个数组中，让用户猜对至少一个字母。尝试3次后，告诉用户他们已丢失并终止代码 <!DOCTYPE html> <html> <head> <title>Exercise 5</title> <link rel="stylesheet" type="text/css" href="css/styles5.css"/&g

所以我在这个练习上坚持太久了，不知道我做错了什么。我在使用数组和合并循环时遇到了困难

任务是将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 &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>
    <!--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;

            } else if(input != a && attempts == 0){
              document.getElementById("valueReturned").innerHTML = "Two tries left!";
            }else if(input != a && attempts == 1){
              document.getElementById("valueReturned").innerHTML = "One more try!";
            }else if(input != a && attempts == 2){
              document.getElementById("valueReturned").innerHTML = "That was your last try! Get lost!";
            }

            }

           }// end of function
   </script>
   </body>
   </html>


练习5
E x c E r c i c E&ensp；5.
输入五个单词

函数getValue（）{
var输入=document.getElementById（“textField”）.value；
变量字母=[“a”、“b”、“c”、“d”、“e”、“f”、“g”、“h”、“i”、“j”]；
var a=字母.indexOf（输入）；
for（变量尝试次数=0；尝试次数<3；尝试次数++）{
如果（输入==“”）{
document.getElementById（“valueReturned”）.innerHTML=“无输入！”；
}如果（a>=0），则为else{
document.getElementById（“valueReturned”）.innerHTML=“你猜对了！”；
打破
}else if（输入！=a&&truments==0）{
document.getElementById（“valueReturned”）.innerHTML=“还剩两次尝试！”；
}else if（输入！=a&&truments==1）{
document.getElementById（“valueReturned”）.innerHTML=“再试一次！”；
}else if（输入！=a&&truments==2）{
document.getElementById（“valueReturned”）.innerHTML=“这是您最后一次尝试！滚开！”；
}
}
}//功能结束

因此，如果用户猜对了，我希望代码停止运行，或者循环停止。如果第一次尝试时猜测错误，则应显示消息“还剩两次尝试！” 如果第二次尝试时猜错了，则应显示消息“还剩一次尝试！” 等等

我现在没有用else语句来结束我的病情，不确定是否需要它。我的For循环设置得不对吗？我的if，else if条件是否不正确

我非常需要你们的帮助

让我们来看看你的逻辑

<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);

请对任何您不确定的内容进行评论

问题是您每次尝试都会重复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。这也意味着我们不必为您的
```
onclick
```
引用而在
```
window
```
上声明全局函数
我们将整个过程包装在一个IIFE（立即调用的函数表达式）中，以防止对全局命名空间的污染
想一想在每次触发事件时不需要复制的内容。我们不需要每次都从DOM中获取对相同元素的引用——让我们在函数之外这样做

array.includes（val）

相当于

array.indexOf（val）！=-1

我还让用户不可能有超过3次的尝试

你能使用while循环还是do-while循环？这完全取决于我，我的老师说他想让我们限制使用循环的尝试，他说可以使用for循环，但我不知道怎么做。Do while似乎是最简单的，我实际上已经把它编码好了，并决定尝试一次。我遇到的主要问题是我在本地声明变量，而if-else条件都很混乱。当我的条件分支时，我似乎总是有点诵读困难。我的老师真的在推动我们使用循环though@gears244是的，使用循环是处理大量数据输入的关键。如果要使用for循环，我只能看到它与an一起工作，这可能超出了材料的范围。但是，我在逻辑方面很差，所以对于特定的解决方案，您可能不需要事件侦听器。现在我看到了这一点，我将进行一些更改。我有点沮丧，因为我确实上了一所私立学校，课程很精简，我们在很短的时间内学习JavaScript，他们提供给我们的理论缺少很多东西。内容很旧，他们提供2011年的教程视频，因此你可能会看到我使用过时的东西，我确实看到“let”使用的比var多得多。更令人沮丧的是，我在这篇文章中从你那里得到的答案比我过去两天从老师那里得到的答案还要多，由于病毒正在传播，通过消息传递进行通信difficult@gears244不幸的是，web开发教学通常依赖于旧的标准/软件。我采访过一些人，他们仍然被教导在AdobeDreamweaver中创建网站！如果你对JavaScript是认真的，我强烈建议你自己去学习，把这些类当作补充。大卫·弗拉纳根（David Flanagan）的《JavaScript:t权威指南》一书将带你从noob到ninja，如果你有编程的写作头脑的话。

(() => {
    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;

    }
})();