如何使用Javascript动态生成输入字段，然后使用它们的值？_Javascript_Arrays_Forms_Function

如何使用Javascript动态生成输入字段，然后使用它们的值？

javascript arrays forms function

如何使用Javascript动态生成输入字段，然后使用它们的值？,javascript,arrays,forms,function,Javascript,Arrays,Forms,Function,我希望能够在提交时找到courseAmount输入字段的数值，然后通过javascript中的onsubmit方法生成新的输入字段（进入hourForm初始表单下的hourForm），然后在提交hourForm表单时从每个生成的输入字段中检索值，并将这些值放入数组中然而，我在使用javascript生成输入字段时遇到了困难，我怀疑在检索courseAmount输入的值并将其移植到我的createInput（）函数时遇到了困难，但我不确定这是否是问题所在这是我的HTML： <!DOCTY

我希望能够在提交时找到

courseAmount

输入字段的数值，然后通过javascript中的

onsubmit

方法生成新的输入字段（进入

hourForm

初始表单下的

hourForm

），然后在提交

hourForm

表单时从每个生成的输入字段中检索值，并将这些值放入数组中

然而，我在使用javascript生成输入字段时遇到了困难，我怀疑在检索

courseAmount

输入的值并将其移植到我的

createInput（）

函数时遇到了困难，但我不确定这是否是问题所在

这是我的HTML：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <form id="initialForm" method="post" onsubmit="createInput()" action="">
    <label>Number of hours for which you would like to study</label>
    <input type="number" name="overallHours" id="overallHours" class="stored" min="1" max="20" step="1" value="1"/>
    <label>Number of courses you would like to study for</label>
    <input type="number" name="courseAmount" id="courseAmount" class="stored" min="1" max="20" step="1" value="1"/>
    <input type="submit" class="submitStudy" value="Submit"/>
  </form>
  <form id="hourForm" method="post" onsubmit="calcHours">
    <label>State the desired time spent working in each course</label>
  </form>
</body>


您希望学习的小时数
您希望学习的课程数量
说明每门课程所需的工作时间

下面是我的Javascript：

var notedOverallHours = document.getElementById("overallHours").value * 60; 
var courseNumberTotal = document.getElementById("courseAmount").value;
var counter = 0;

function createInput() {
  var newForm = document.getElementById("hourForm");
  document.getElementById("initialForm").style.display = "none";
  document.getElementById("hourForm").style.display = "block";

  for (i = 0; i <= courseNumberTotal; i++) {
    newForm.innerHTML = "<label>Course #" + (counter + 1) + "</label>" + "<input type='number' name='courseHours' class='newInputs' min='1' max='9' step='1' value='1'/>";
    counter++;
  }
  newForm.innerHTML = "<input type='submit' value='submit'/>";
}

var-notedverallhours=document.getElementById（“总小时”）.value*60；
var courseNumberTotal=document.getElementById（“courseAmount”）.value；
var计数器=0；
函数createInput（）{
var newForm=document.getElementById（“hourForm”）；
document.getElementById（“initialForm”）.style.display=“无”；
document.getElementById（“hourForm”）.style.display=“block”；
对于（i=0；i当createInput（）时）调用
函数时，您没有获得所需的结果，因为您在循环的每个迭代中重置了newForm.innerHTML
，然后在循环结束时再次重置。您应该使用=来附加所需的文本，而不是替换现有文本。

另一个问题是，当您按下提交按钮时，页面正在重新加载，然后createInput（）
才能获得所需的结果。您很可能希望在按下提交按钮时停止页面的实际提交，从而重新加载。为此，您可以将表单的onsubmit
属性更改为“return createInput（）”
然后在createInput（）函数的末尾添加一行return false；
，以向浏览器指示您不希望提交表单。
当createInput（）函数调用
函数时，您没有获得所需的结果，因为您在循环的每个迭代中重置了newForm.innerHTML
，然后在循环结束时再次重置。您应该使用=来附加所需的文本，而不是替换现有文本。

另一个问题是，当您按下submit按钮时，页面在createInput（）
能够获得所需结果之前正在重新加载。您很可能希望在按下submit按钮时停止页面的实际提交，从而重新加载。为此，您可以将表单的onsubmit
属性更改为”return createInput（）“
然后在createInput（）
函数的末尾添加一行return false；
，以向浏览器指示您不希望提交表单。
来自mdn页面关于innerHTML的内容：删除元素的所有子元素，解析内容字符串并将结果节点指定为元素的子元素。“
一般来说，您根本不想使用innerHTML。几乎总是有更好的方法。在这种情况下，将使用createElement和appendChild
此外，没有“onsubmit”方法，您这样调用的是一个HTML属性，它为submit事件注册一个处理程序
但是，使用html属性有其严重的缺点：
考虑到所有这些，以下是我将要做的：
HTML:

您希望学习的小时数

您希望学习的课程数量

说明每门课程所需的工作时间

js:
var-notedverallhours=document.getElementById（“总小时”）.value*60；
var courseNumberTotal=document.getElementById（“courseAmount”）.value；
var计数器=0；
var initialForm=document.getElementById（“initialForm”）；
var hourForm=document.getElementById（“hourForm”）；
initialForm.addEventListener（'submit'，createInput）；
小时格式addEventListener（'submit'，calcHours）；
函数calcHours（）{}
函数createInput（ev）{
ev.preventDefault（）；//如果使用的是裸按钮和click事件，则不需要此选项
var newForm=document.getElementById（“hourForm”）；
initialForm.style.display=“无”；
hourForm.style.display=“块”；
对于（i=0；i，来自关于innerHTML的mdn页面：“删除元素的所有子元素，解析内容字符串，并将结果节点指定为元素的子元素。”
一般来说，您根本不想使用innerHTML。几乎总是有更好的方法。在这种情况下，将使用createElement和appendChild
此外，没有“onsubmit”方法，您这样调用的是一个HTML属性，它为submit事件注册一个处理程序
但是，使用html属性有其严重的缺点：
考虑到所有这些，以下是我将要做的：
HTML:

您希望学习的小时数

您希望学习的课程数量

说明每门课程所需的工作时间

js:
var-notedverallhours=document.getElementById（“总小时”）.value*60；
var courseNumberTotal=document.getElementById（“courseAmount”）.value；
var计数器=0；
var initialForm=document.getElementById（“initialForm”）；
var hourForm=document.getElementById（“hourForm”）；
initialForm.addEventListener（'submit'，c
// Replacing the contents of newForm.innerHTML
newForm.innerHTML = "foo";

// Appending to newForm.innderHTML (You want to do this)
newForm.innerHTML += "foo";

<form id="initialForm" method="post" action="">
    <label>Number of hours for which you would like to study</label>
    <input type="number" name="overallHours" id="overallHours" class="stored" min="1" max="20" step="1" value="1" /><hr>
    <label>Number of courses you would like to study for</label>
    <input type="number" name="courseAmount" id="courseAmount" class="stored" min="1" max="20" step="1" value="1" /><hr>
    <input type="submit" class="submitStudy" value="Submit" />
</form>
<form id="hourForm" method="post" >
    <label>State the desired time spent working in each course</label><hr>
</form>

var notedOverallHours = document.getElementById("overallHours").value * 60;
var courseNumberTotal = document.getElementById("courseAmount").value;
var counter = 0;

var initialForm = document.getElementById("initialForm");
var hourForm = document.getElementById("hourForm");

initialForm.addEventListener('submit', createInput);
hourForm.addEventListener('submit', calcHours);

function calcHours() {}

function createInput(ev) {
    ev.preventDefault(); // this is not needed if you are using a bare button and the click event
    var newForm = document.getElementById("hourForm");
    initialForm.style.display = "none";
    hourForm.style.display = "block";

    for (i = 0; i <= courseNumberTotal; i++) {
        addControl(newForm, "Course #" + (counter + 1));
        counter++;
    }
    var submit = document.createElement('input');
    submit.type = 'submit';
    submit.value = 'submit';
    newForm.appendChild(submit);
}

function addControl(form, labelText) {
    var label = document.createElement('label');
    var input = document.createElement('input');
    var hr = document.createElement('hr');
    input.type = 'number';
    input.name = 'courseHours';
    input.classname = 'newInputs';
    input.min = '1';
    input.max = '9';
    input.step = '1';
    input.value = '1';
    label.textContent = labelText;
    form.appendChild(label);
    form.appendChild(input);
    form.appendChild(hr);


}

...
<form id="initialForm" method="post" action="">
...