Javascript 如何检查所有输入是否已正确填写，然后将其更改为绿色

正如你在图中看到的，我有一个单词有两个输入字段，一个单词有三个输入字段。如何生成一个变量来检查包含2个输入字段的单词是否已正确填写。示例：带3的单词有3个输入字段，第一个字段应为1，第二个字段应为2，第三个字段应为3。我如何才能使它们保留输入字段，直到所有3个字段都正确填写，然后将3个输入字段更改为绿色按钮？这应该通过每个单词各自的输入字段来完成。现在我有这样的。。。但这只会检查每个单词，然后将其设置为绿色输入按钮：

function prepareCheck() {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
  var idxxx = 0;
       $(document).on('change', '.syl-input', function() {
           var rowCounter = $(this).parent().parent().parent().parent().attr('id');
           var inputCounter = $(this).attr('id');
           var jsyl = json.main_object.main_object.exercises[rowCounter].syllables[inputCounter];
           var jsylall = json.main_object.main_object.exercises[rowCounter].syllables;
           var valueInput = $(this).val();

       if (valueInput == jsyl) {
           var correctBtn = $('<button/>', {
              'class': 'btn btn-success buttonCorrect',
              'type': 'button',
              'id': "button" + CBC++,
              'html': valueInput
          });
          $(this).replaceWith(correctBtn);
              S.playRight();
              S.addRight();
       } else if ($.inArray(valueInput, jsylall) >= -1) {
            $(this).css({'color':'red'});
            S.playWrong();
            S.addWrong();
         }
    });
 });
}

如何创建输入字段（如果是有用的信息）

var sylInput=$（“”{
“类型”：“文本”，
“类”：“窗体控件syl输入”，
“名称”：+c++，
“id”：+idsyll++
});

使用以下代码进行尝试：

函数checkInputFields（键、值）{
常量有效字段=[]；
对于（var i=0；icheckInputFields（row1Keys，row1Values））；//第1行
input.addEventListener（'keyup'，（）=>checkInputFields（row2Keys，row2Values））；//第2行
}

第一行：


第二行：

Sweet！这就是我要找的，但是按钮也可以吗？将输入字段更改为按钮（boostrap类btn btn success）。我可以这样做变量，这样我就不必手动放弃行等？它们是由主持人动态制作的。他/她决定创建多少（每个单词最多4个输入字段）输入字段和多少单词。@JJShaw您的意思是将输入文本字段更改为按钮？当然这是可能的，但是用户如何输入他的值呢？它应该计算（因此它们是输入字段），当它们正确时（某个单词的所有相应输入字段），它应该将它们更改为绿色按钮（btn btn success）表示您的文字正确无误，无需在相应的输入字段中执行任何进一步操作。@JJShaw我不确定是否正确理解您的意思，但我已编辑代码，将输入文本字段更改为引导按钮。是的！确切地正是你现在拥有的！但我如何在自己的代码中实现这一点呢？我的意思是，你有两个硬编码的输入字段，并创建了变量将答案放入其中，等等。但是如果它是动态的，并且一些主持人可以决定可以创建多少个输入字段/行呢？例如：您有5个输入字段，2行，如果主持人决定有5个单词（所以5行），其中全部有4个输入字段，该怎么办？那么你将如何实施这一点？别误会我的意思，你的代码就像我在寻找的一样，但是你如何使它更具动态性呢？

{
"main_object": {
"id": "new",
"getExerciseTitle": "testforcounter",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "testforcounter",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "Texel",
      "syllables": [
        "tex",
        "el",
        "",
        ""
      ]
    },
    {
      "word": "3",
      "syllables": [
        "1",
        "2",
        "3",
        ""
      ]
    }
  ]
},
"dataType": "json"
}
}

var sylInput = $('<input/>', {
 'type': 'text',
  'class': 'form-control syl-input',
  'name':  +c++,
 'id': +idsyll++
});