JavaScript动态生成表单时变量获取失败，占位符显示undefined

我看到你在尝试用JavaScript动态生成表单时遇到了placeholder显示undefined的问题，这主要是因为变量名冲突和循环索引错误导致的，另外在DOM元素的挂载顺序上也有一些小问题。下面我来一步步帮你排查和修正：

问题分析 #

1. 变量名冲突导致索引混乱 #

你在外部循环中使用了var i作为循环变量，然后在内层循环里又用var i = document.createElement("input");重新定义了i，这会直接覆盖外部的循环索引值。当你用parent.types[i]和parent.fieldsM[i]取值时，i已经变成了input元素对象，而不是数字索引，自然取不到正确的数组值，返回undefined。

2. 循环索引使用错误 #

内层循环是用来遍历fields对应的输入框，应该使用内层的循环变量j来访问types和fieldsM数组，而不是外层的i（外层的i是用来遍历temas的）。

3. DOM元素挂载顺序错误 #

当前代码中，你每次内层循环都把整个form元素追加到div里，最后只把最后一个div追加到页面容器中，这会导致form被重复挂载，且前面的div都没有被正确添加到页面。

修正后的代码 #

HTML部分（保持不变，确保全局变量正确定义） #

<body> 
  <script> 
    var types=['text','number', 'text']; 
    var fields=3; 
    var temas =3; 
    var fieldsM=['um','dois', 'tres']; 
  </script> 
  <div id="main">
    <button class="button" onclick="gerar();" id="gerar">Criar Novo</button> 
    <div id="form"> 
      <!--form here -->
    </div> 
  </div> 
</body>

JavaScript部分（修正后的gerar函数） #

function gerar(){
  // 先清空之前生成的表单，避免重复创建
  document.getElementById('form').innerHTML = '';
  
  // 创建表单元素
  const form = document.createElement("form");
  form.setAttribute('method',"post");
  form.setAttribute('action',"");

  // 遍历temas，生成每个对应的div
  for(let i=0; i < temas; i++){
    const div = document.createElement("div");
    div.setAttribute('id', `form${i}`);

    // 遍历fields，生成每个输入框
    for(let j=0; j < fields; j++){
      const input = document.createElement("input");
      input.setAttribute('type', types[j]); // 使用内层循环变量j
      input.setAttribute('placeholder', fieldsM[j]); // 使用内层循环变量j
      div.appendChild(input); // 把输入框加到当前div里
    }

    form.appendChild(div); // 把div加到表单里
  }

  // 把整个表单加到页面的form容器中
  document.getElementById('form').appendChild(form);
}

额外优化建议 #

• 尽量避免使用var，改用let或const来声明变量，避免变量提升和作用域混乱的问题。
• 不需要用parent来访问全局变量，因为在浏览器环境中，全局变量默认挂载在window对象上，直接使用变量名即可（如果变量确实是全局定义的）。
• 每次调用gerar函数时，先清空容器内的旧内容，避免重复生成表单。

内容的提问来源于stack exchange，提问作者Luis Luis Maia Maia