Javascript 缺字游戏（空白填充）

我正在做一个小文字游戏，其中有一个缺少的单词，如果你用正确的答案填写输入字段，它会变成绿色

我想在这段代码中添加一个功能，但我不知道如何添加 我想编辑它，所以如果你把一个错误的答案，它会变成红色

在这一刻，它只是把你的分数加起来，如果你输入正确的答案，它就会变成绿色

我知道答案是关于js文件的结尾，如果正确的话，它会变成绿色

这是html

        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'>    </script>
           <script type="text/javascript">
           $(document).ready(function(){
            $("input").not( $(":button") ).keypress(function (evt) {
             if (evt.keyCode == 13) { 
              iname = $(this).val(); 
              if (iname !== 'Submit'){
               var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
               var index = fields.index( this );
               if ( index > -1 && ( index + 1 ) < fields.length ) {
                 fields.eq( index + 1 ).focus();
               } 
               return false 
             } 
           } 
         }); 
          });</script>


       <script type="text/javascript" src="prolinguis-gap-filler.js"></script>

<div style="font-family:Helvetica; font-size: 18px; vertical-align:bottom; color:#3e2e41; margin:16px 0;"> Score: <label id="label_score">0%</label></div>

                <form class="game-form" style="padding: 0px; width: 100%; margin: 10px auto;" >

                  <!-- //////////////////////////////////////////////////////////////////////////////////////// -->

                  <div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;">

                    <p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 1</p>
                    <p>Where is Stephen from? <input TYPE="text" id="ctr1" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p>
                  </div>

                  <!-- //////////////////////////////////////////////////////////////////////////////////////// -->

                  <div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;">

                    <p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 2</p>
                    <p>If someone asks you, what’s cooking? You shouldn’t answer with: <input TYPE="text" id="ctr2" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p>
                  </div>

                  <!-- //////////////////////////////////////////////////////////////////////////////////////// -->

                  <div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;">

                    <p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 3</p>
                    <p>Instead, just say <input TYPE="text" id="ctr3" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p>
                  </div>

                </form>

在js文件中，我有这个

    <script>
            var ctr = 0
            var score_ctr = 0
            function validate(value, id) {
             if (id =='ctr1' && (value.toUpperCase()=="UNITED STATES" || value.toUpperCase()=="USA" || value.toUpperCase()=="AMERICA")) {
              ctr = ctr + 1;
              correct_answer(id);
              document.getElementById(id).value="UNITED STATES";
             }
             if (id =='ctr2' && (value.toUpperCase()=="GOOD")) {
              ctr = ctr + 1;
              correct_answer(id);
              document.getElementById(id).value="GOOD";
             }
             if (id =='ctr3' && (value.toUpperCase()=="NOTHING MUCH" || value.toUpperCase()=="NOT MUCH")) {
              ctr = ctr + 1;
              correct_answer(id);
              document.getElementById(id).value="NOTHING MUCH";
             }


            }
            function correct_answer (id) {
             score_ctr = (ctr * 100) / 3 
             document.getElementById('label_score').innerHTML = score_ctr.toFixed(0) + '%'
             document.getElementById(id).disabled=true;
             document.getElementById(id).style.backgroundColor = '#c1d82f'
             document.getElementById(id).style.cursor="default"

            }
    </script>

将validatevalue，id更改为以下内容：

function validate(value, id) {
    if (id == 'ctr1' && (value.toUpperCase() == "UNITED STATES" || value.toUpperCase() == "USA" || value.toUpperCase() == "AMERICA")) {
        ctr = ctr + 1;
        correct_answer(id);
        document.getElementById(id).value = "UNITED STATES";
    }
    else if (id == 'ctr2' && (value.toUpperCase() == "GOOD")) {
        ctr = ctr + 1;
        correct_answer(id);
        document.getElementById(id).value = "GOOD";
    }
    else if (id == 'ctr3' && (value.toUpperCase() == "NOTHING MUCH" || value.toUpperCase() == "NOT MUCH")) {
        ctr = ctr + 1;
        correct_answer(id);
        document.getElementById(id).value = "NOTHING MUCH";
    }
    else
    {
        document.getElementById(id).style.backgroundColor = '#ff0000';
        document.getElementById(id).style.cursor = "default";
    }

这将检查所有不同的输入字段，如果没有找到正确答案，将最后一个模糊字段的背景设置为红色

---

只是一个提示，如果你想清理你的代码，考虑使用一个Switter语句来确定你正在检查的ID。

尝试制作一个JScDeldL，它可以帮助想要帮助你的人：好吧，冷静一秒钟，我会把它变成一个-谢谢。