Question

基本上，我使用JavaScript动态生成一个表单，该表单允许单个提交中的多个条目。以下是我使用的代码：

function addEvent()
{
 var ni = document.getElementById('myDiv');
 var numi = document.getElementById('theValue');
 var num = (document.getElementById('theValue').value - 1) + 2;
 numi.value = num;
 var divIdName = 'my' + num + 'Div';
 var newdiv = document.createElement('div');
 newdiv.setAttribute('id', divIdName);
 newdiv.innerHTML = '<table id="style" style="background-color: #ffffff;"><tr><td colspan="2">Entry ' + num + '<hr \/><\/td><\/tr><tr><td><label>Item 1: <\/td><td><input name="item1_' + num + '" value="" type="text" id="item1" \/><\/label><\/td><\/tr><tr><td><label>Item 2: <\/td><td><input name="item2_' + num + '" type="text" id="item2" \/><\/label><\/td><\/tr><tr><td><label>Item 3: <\/td><td><input type="text" name="item3_' + num + '" id="item3" \/><\/label><\/td><\/tr><tr><td><label>Item 4: <\/td><td><select name="item4_' + num + '" id="item4"><option value="---">---<\/option><option value="opt_1">1<\/option><option value="opt_2">2<\/option><option value="opt_3">3<\/option><option value="opt_4">4<\/option><\/select><\/label><\/td><\/tr><\/table>';
 ni.appendChild(newdiv);
}

这很好用，生成我需要的条目字段。在浏览器中使用控制台，我甚至验证了所有名称都是正确的。问题是我需要选择并生成输出。我尝试了几种方法，但所有方法都产生了空值。

function generateVideo()
{
 var entries = document.getElementById('theValue').value;
 var item1 = {};
 var item2 = {};
 var item3 = {};
 var item4 = {};
 for(i = 1; i <= entries; i++)
 {
  item1[i - 1] = document.getElementById('item1_' + i);
  item2[i - 1] = document.getElementById('item2_' + i);
  item3[i - 1] = document.getElementById('item3_' + i);
  item4[i - 1] = document.getElementById('item4_' + i);
 }
 var code = 'Copy code and paste it into Notepad<br \/>"Save as" filename.html<br \/><textarea name="" cols="45" rows="34">header template\n';
 for(i = 0; i < entries; i++)
 {
  if(i != (entries - 1))
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"],\n';
  }
  else
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"]\n';
  }
 }
 code = code + 'footer template<\/textarea>';
 var result = document.getElementById("result");
 result.innerHTML = code;
}

输出如下：

Copy code and paste it into Notepad<br />"Save as" CourseName_Unit_Chapter.html<br /><textarea name="" cols="45" rows="34">header template
     ["null", "null", "null", "null"]
footer template</textarea>

现在，某些字段可以为null，这很好（在我开始工作之后我会进行表单验证），但无论输入什么，我都会为每个字段获取null。

我原来在getElementByIds上有.value，但是当条目变量大于0（默认值）时，这只导致脚本没有运行，这就是我尝试删除它们的原因。

function generateVideo()
{
 var entries = document.getElementById('theValue').value;
 var item1 = {};
 var item2 = {};
 var item3 = {};
 var item4 = {};
 for(i = 1; i <= entries; i++)
 {
  item1[i - 1] = document.getElementById('item1_' + i).value;
  item2[i - 1] = document.getElementById('item2_' + i).value;
  item3[i - 1] = document.getElementById('item3_' + i).value;
  item4[i - 1] = document.getElementById('item4_' + i).value;
 }
 var code = 'Copy code and paste it into Notepad<br \/>"Save as" filename.html<br \/><textarea name="" cols="45" rows="34">header template\n';
 for(i = 0; i < entries; i++)
 {
  if(i != (entries - 1))
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"],\n';
  }
  else
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"]\n';
  }
 }
 code = code + 'footer template<\/textarea>';
 var result = document.getElementById("result");
 result.innerHTML = code;
}

我也尝试过多维数组的变体，而不是四个数组，但结果相同。

输出（如删除getElementByIds上的.val所示）很好。基本上，我尝试使用动态生成的表单填充数组时出现了问题。

我怀疑元素ID声明的问题，但我不确定如何声明它。这种脚本风格不是我的常态。 ^^＆＃39;

任何人对如何修复for循环以生成数组都有任何想法？

Answer 1

替换所有出现的

itemN[i]

带

itemN[i].value

如果不起作用，请添加

console.log( itemN[i] )

并查看它的输出

使用动态生成的表单生成数组

1 个答案: