Question

我有一个以一个输入开始的表单，然后我按下一个按钮添加其他输入。但是，每当添加新输入时，它都会清除先前输入中的任何数据。这是代码的样子：

表单初始输入：

<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>

displayGrade() 方法：

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();
}

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

Answer 1

使用appendChild代替innerHTML +=，因为它会再次重新插入整个HTML，这会让您丢失数据以及绑定事件（非内联绑定事件）..

Node.appendChild（）方法将节点添加到指定父节点的子节点列表的末尾

试试这个：

＆＃13;

var gradeCounter = 2;

function calculateAverage() {
  var average = 0;
  var grades = document.getElementsByClassName("grade");

  for (var i = 0; i < grades.length; i++) {
    var gradeNumber = parseInt(grades[i].value);

    if (!isNaN(gradeNumber))
      average += parseInt(grades[i].value);
  }

  return average /= grades.length;
}

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");
  var div = document.createElement('div');
  var new_grade = '<div class="grade_input">Grade ' + gradeCounter+++': <input class="grade" type="text" size="1" maxlength="3" placeholder="0"></div>';
  div.innerHTML = new_grade;
  var child = div.firstChild;
  grade_inputs_form.appendChild(child);

  displayGrade();
}

function removeGrade() {

}

＆＃13;

body {
  background-color: aliceblue
}
form {
  margin-top: 20px;
  margin-left: 20px;
  font-size: 17pt;
}
h1 {
  text-align: center;
  font-family: "Avant Garde", sans-serif;
  font-size: 40px;
  text-decoration: underline;
}
button {
  margin-left: 40px;
  font-size: 14pt
}
input {
  margin-bottom: 5px;
  font-size: 14pt;
}
div.grade_input {
  display: inline-block;
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}
#buttons {
  text-align: center;
  margin-bottom: 30px;
}
#grade_tag {
  margin-top: 15px;
  margin-left: 30px;
  font-family: "Avant Garde", sans-serif;
  display: inline-block;
  font-size: 24pt;
}
#grade {
  margin-left: 6px;
  font-size: 36pt;
  color: #E60000;
  font-family: "Avant Garde", sans-serif;
  font-weight: bold;
}
::-webkit-input-placeholder {
  color: #6A6A6A;
}
::-moz-placeholder {
  color: #6A6A6A;
}
:-ms-input-placeholder {
  color: #6A6A6A;
}
input:-moz-placeholder {
  color: #6A6A6A;
}

＆＃13;

<h1>Student Grade Calculator</h1>

<div id="buttons">
  <button style="font-size: 24px;" onclick="addGrade()">Add Grade</button>
  <button style="font-size: 24px;" onclick="removeGrade()">Remove Grade</button>
</div>

<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>

<span id="grade_tag">Average grade: </span>
<span id="grade">F</span>

＆＃13;

Fiddle here

Answer 2

您的问题是 - ID 与类

不同

rstr

您需要按printf而非var grade_label = document.getElementById("grade"); <input class="grade" type="text" size="1" maxlength="3" placeholder="0"></div>来获取元素。

假设您想要找出平均值的多个等级，请尝试

classname

添加新文本字段时会重置文本字段

2 个答案: