嵌套for循环中断外层循环：前端表单生成异常排查

嘿，我一眼就揪出问题所在啦！

问题根源 #

你遇到的异常完全是因为嵌套for循环里的条件判断写错了——在内层循环中，你把本该用j的地方写成了i，直接搞乱了外层循环的计数器逻辑，导致外层循环被提前终止。

看看这段出问题的代码片段：

/*for (j = 0; i < options.length; j++) { 
  var optiontag = document.createElement("OPTION");
  optiontag.value = options[j];
  optiontag.innerText = options[j];
  document.getElementById("s"+String(x)).appendChild(optiontag); 
}*/

这里的循环条件i < options.length是致命错误：当内层循环启动后，i会被直接推进到options.length的值（也就是5），而外层循环的终止条件是i < parseInt(document.getElementById('nm').value)（当nm=3时就是i<3），所以外层循环直接就结束了，自然只生成了第一组输入项。

修复后的完整代码 #

把内层循环的条件改成j < options.length，同时给j加上var声明避免变量污染，修复后的代码如下：

function next() { 
  document.getElementById('config').setAttribute("hidden","true"); 
  document.getElementById('formdiv').removeAttribute("hidden"); 
  mixer(); 
}

function mixer() { 
  var x = 0; 
  for (var i = 0; i < parseInt(document.getElementById('nm').value); i++) { 
    var title = document.createElement("P"); 
    title.style = "font-family:verdana;font-size:18px;"; 
    title.id = "p"+String(i); 
    document.getElementById("myForm").appendChild(title); 
    document.getElementById("p"+String(i)).innerText = "Enter the amount of mixer number "+String(i+1); 
    
    var mixers = document.createElement("INPUT"); 
    mixers.type = "text"; 
    mixers.id = "m"+String(i); 
    mixers.size = '1'; 
    document.getElementById("myForm").appendChild(mixers); 
    
    var options = ['Select a unit','ml','L','UK Pints','US Pints']; 
    var dropdown = document.createElement("SELECT"); 
    dropdown.id = "s"+String(x); 
    document.getElementById("myForm").appendChild(dropdown); 
    
    // 修复后的内层循环
    for (var j = 0; j < options.length; j++) { 
      var optiontag = document.createElement("OPTION"); 
      optiontag.value = options[j]; 
      optiontag.innerText = options[j]; 
      document.getElementById("s"+String(x)).appendChild(optiontag); 
    }
    x += 1; 
  } 
}

修复后效果 #

现在当nm=3时，会正常生成3组包含输入框+下拉选择器的表单项，和你预期的第一张图结构完全一致，同时每个输入项都带有完整的单位下拉选项。

内容的提问来源于stack exchange，提问作者Jack Rycroft