Javascript 添加新字段时，文本字段将重置

我有一个表单，从一个输入开始，然后按下一个按钮添加额外的输入。但是，每当添加新输入时，它都会清除以前输入中的所有数据。下面是代码的样子：

使用表单进行初始输入：

<form id="grade_inputs" onkeyup="displayGrade()">
    <div class="grade_input">Grade 1: <input class="grade" type="text" size="1" maxlength="3" placeholder="0"></div>
</form>

function displayGrade()
{
var average = calculateAverage();
var grade_label = document.getElementById("grade");
var grade_letter;
var grade_color;

if(average < 70)
{
    grade_letter = "F";
    grade_color = "#E60000";
}
else if(average < 80)
{
    grade_letter = "C";
    grade_color = "#FF7700";
}
else if(average < 90)
{
    grade_letter = "B";
    grade_color = "#FAC800";
}
else
{
    grade_letter = "A";
    grade_color = "#5AE000";
}

grade_label.innerHTML = grade_letter;
grade_label.style.color = grade_color;
}

function addGrade()
{
var grade_inputs_form = document.getElementById("grade_inputs");

grade_inputs_form.innerHTML += '<div class="grade_input">Grade ' + gradeCounter++ + ': <input class="grade" type="text" size="1" maxlength="3" placeholder="0"></div>';

displayGrade();
}

添加新输入的函数：

<form id="grade_inputs" onkeyup="displayGrade()">
    <div class="grade_input">Grade 1: <input class="grade" type="text" size="1" maxlength="3" placeholder="0"></div>
</form>

function displayGrade()
{
var average = calculateAverage();
var grade_label = document.getElementById("grade");
var grade_letter;
var grade_color;

if(average < 70)
{
    grade_letter = "F";
    grade_color = "#E60000";
}
else if(average < 80)
{
    grade_letter = "C";
    grade_color = "#FF7700";
}
else if(average < 90)
{
    grade_letter = "B";
    grade_color = "#FAC800";
}
else
{
    grade_letter = "A";
    grade_color = "#5AE000";
}

grade_label.innerHTML = grade_letter;
grade_label.style.color = grade_color;
}

function addGrade()
{
var grade_inputs_form = document.getElementById("grade_inputs");

grade_inputs_form.innerHTML += '<div class="grade_input">Grade ' + gradeCounter++ + ': <input class="grade" type="text" size="1" maxlength="3" placeholder="0"></div>';

displayGrade();
}

函数addGrade（）
{
var grade_inputs_form=document.getElementById（“grade_inputs”）；
grade_输入_form.innerHTML++='grade'+GRADECUTER++'：'；
显示等级（）；
}

我通过附加到父表单的innerHTML来添加新的输入。我不确定这是否是正确的方法，所以任何建议都是非常感谢的！谢谢

使用而不是

innerHTML+=

，因为它将再次重新插入整个HTML，这将使您丢失数据以及绑定事件（而不是内联绑定事件）

方法的作用是：在指定父节点的子节点列表的末尾添加一个节点

试试这个：

var等级计数器=2；
函数calculateAverage（）{
var平均值=0；
变量等级=document.getElementsByClassName（“等级”）；
对于（变量i=0；i

正文{
背景色：aliceblue
}
形式{
边缘顶部：20px；
左边距：20px；
字号：17号；
}
h1{
文本对齐：居中；
字体系列：“前卫”，无衬线；
字体大小：40px；
文字装饰：下划线；
}
钮扣{
左边距：40px；
字号：14pt
}
输入{
边缘底部：5px；
字号：14pt；
}
div.grade_输入{
显示：内联块；
位置：相对位置；
左边距：15px；
右边距：15px；
边缘底部：15px；
}
#钮扣{
文本对齐：居中；
边缘底部：30px；
}
#等级标签{
边缘顶部：15px；
左边距：30px；
字体系列：“前卫”，无衬线；
显示：内联块；
字号：24pt；
}
#等级{
左边距：6px；
字号：36pt；
颜色：#E60000；
字体系列：“前卫”，无衬线；
字体大小：粗体；
}
：-webkit输入占位符{
颜色：#6A6A；
}
：-moz占位符{
颜色：#6A6A；
}
：-ms输入占位符{
颜色：#6A6A；
}
输入：-moz占位符{
颜色：#6A6A；
}

学生成绩计算器
加分
除坡
一级：
平均成绩：
F

使用而不是

innerHTML+=

，因为它将再次重新插入整个HTML，这将使您丢失数据以及绑定事件（而不是内联绑定事件）

方法的作用是：在指定父节点的子节点列表的末尾添加一个节点

试试这个：

var等级计数器=2；
函数calculateAverage（）{
var平均值=0；
变量等级=document.getElementsByClassName（“等级”）；
对于（变量i=0；i

正文{
背景色：aliceblue
}
形式{
边缘顶部：20px；
左边距：20px；
字号：17号；
}
h1{
文本对齐：居中；
字体系列：“前卫”，无衬线；
字体大小：40px；
文字装饰：下划线；
}
钮扣{
左边距：40px；
字号：14pt
}
输入{
边缘底部：5px；
字号：14pt；
}
div.grade_输入{
显示：内联块；
位置：相对位置；
左边距：15px；
右边距：15px；
边缘底部：15px；
}
#钮扣{
文本对齐：居中；
边缘底部：30px；
}
#等级标签{
边缘顶部：15px；
左边距：30px；
字体系列：“前卫”，无衬线；
显示：内联块；
字号：24pt；
}
#等级{
左边距：6px；
字号：36pt；
颜色：#E60000；
字体系列：“前卫”，无衬线；
字体大小：粗体；
}
：-webkit输入占位符{
颜色：#6A6A；
}
：-moz占位符{
颜色：#6A6A；
}
：-ms输入占位符{
颜色：#6A6A；
}
输入：-moz占位符{
颜色：#6A6A；
}

学生成绩计算器
加分
除坡
一级：
平均成绩：
F