Question

我在下面发布了一个脚本，我希望用户添加一个新字段，当添加新字段时，我希望添加一个新的变量。现场示例：用户点击“添加新字段” 将var添加到var Reason2下面，分别称为Reason3，Reason4等。 “原因三：”在第51行的原因二下方添加了+ Reason3 +。

我不知道如何诚实地完成上述操作。

<!DOCTYPE html>
<html lang="en">
<form name="TRF" method="post">
  <p style="color:white">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="jumbotron">
            <h1 class="text-center">Accepted Format</h1>
            <hr>
            <div class="row">
              <h6 class="text-uppercase"><strong><center>Accepted Format</center></strong></h6>
              <table style="width:100%" id="theTable">
                <tr>
                  <td>Applicant's Name:</td>
                  <td><input type="text" name="accname" size="75" placeholder="" required></td>
                </tr>
                <tr>
                  <td>Reason 1:</td>
                  <td><input type="text" name="R1" size="75" placeholder="" required></td>
                </tr>
                <tr>
                  <td id="bla">Reason 2:</td>
                  <td><input type="text" name="R2" size="75" placeholder="" required></td>
                </tr>

              </table>
              <h3>CODE:</h3>
              <textarea  id="box" cols="100" rows="10"></textarea>
              <p><a class="btn btn-success btn-lg" onclick="generateCode2()" role="button">GENERATE CODE</a></p>


            </div>
            <button id="newField">
            add new field
            </button>
            </center>
          </div>
        </div>
      </div>
    </div>
<html>
<head>
<script>
function generateCode2() {
    var AccoutName = document.forms["TRF"]["accname"].value;
    var Reason1 = document.forms["TRF"]["R1"].value;
      var Reason2 = document.forms["TRF"]["R2"].value;



    document.getElementById("box").value =
"[center][img width=500 height=500]https://i.imgur.com/FuxDfcy.png[/img][/center]"+
"[hr]"+
"\n"+
"[b]Dear[/b] "+AccoutName+
"\n"+
"After reading your Application, Imperials staffs have decided to [color=green][b]Accept[/b][/color] you. "+
"\n"+
"Reason One: " +Reason1+
"\n"+
"Reason Two: " +Reason2+
"\n"+
"Welcome to the Family. "+
"\n"+

""
}
var newField = document.getElementById("newField");
var counter = 3;

function createNewField() {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  var td2 = document.createElement("td");
  td1.innerHTML = "Reason " + counter + ":";
  var inp = document.createElement("input");
  inp.type = "text";
  inp.size = "75";
  inp.name = "R" + counter;
  inp.value=document.getElementById("box").value;
  td2.appendChild(inp);

  document.getElementById("theTable").appendChild(tr);

  tr.appendChild(td1);
  tr.appendChild(td2);

  counter++;
}
newField.addEventListener("click", createNewField);
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();
</script>
</head>
</color>
</font>
      </div>
    </div>
  </div>
</html>

用户点击“添加新字段” 将var添加到var Reason2下面，分别称为Reason3，Reason4等。 “原因三：”在第51行的原因二下方添加了+ Reason3 +。

Answer 1

在Javascript中，可以使用 createElement（）函数在运行时创建html元素。在您的情况下，我们需要创建很多单独的元素来复制表的结构。这些是<tr> <td> <input>。 tr 元素需要添加到表，包含文本“原因＃：”的 td 和 td 保持 input 元素是 tr 的子元素。要将动态创建的元素添加到DOM，请使用 appendChild（）函数。

输入元素需要特殊处理，因为它包含唯一的ID。您拥有的两个由html构成的元素是'R1'和'R2'-因此，一个新的元素应遵循该模式并从3开始。这是通过设置全局变量，将其附加到名称并在其后递增来完成的。

最后，我们需要添加一个“创建新字段”按钮。

看看这个例子（您必须向下滚动才能看到按钮）：

var newField = document.getElementById("newField");
var counter = 3;

function createNewField() {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  var td2 = document.createElement("td");
  td1.innerHTML = "Reason " + counter + ":";
  var inp = document.createElement("input");
  inp.type = "text";
  inp.size = "75";
  inp.name = "R" + counter;
  td2.appendChild(inp);

  document.getElementById("theTable").appendChild(tr);

  tr.appendChild(td1);
  tr.appendChild(td2);

  counter++;
}
newField.addEventListener("click", createNewField);

function generateCode2() {
  var AccoutName = document.forms["TRF"]["accname"].value;
  var reasons = "";

  for (var a = 1; a < counter; a++) {
    reasons += "Reason " + a + ": " + document.forms["TRF"]["R" + a].value + "\n";
  }

  document.getElementById("box").value =
    "[center][img width=500 height=500]https://i.imgur.com/FuxDfcy.png[/img][/center]" +
    "[hr]" +
    "\n" +
    "[b]Dear[/b] " + AccoutName +
    "\n" +
    "After reading your Application, Imperials staffs have decided to [color=green][b]Accept[/b][/color] you. " +
    "\n" + reasons +
    "Welcome to the Family. " +
    "\n" +
    ""
}

<form name="TRF" method="post">
  <p style="color:white">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="jumbotron">
            <h1 class="text-center">Accepted Format</h1>
            <hr>
            <div class="row">
              <h6 class="text-uppercase"><strong><center>Accepted Format</center></strong></h6>
              <table style="width:100%" id="theTable">
                <tr>
                  <td>Applicant's Name:</td>
                  <td><input type="text" name="accname" size="75" placeholder="" required></td>
                </tr>
                <tr>
                  <td>Reason 1:</td>
                  <td><input type="text" name="R1" size="75" placeholder="" required></td>
                </tr>
                <tr>
                  <td id="bla">Reason 2:</td>
                  <td><input type="text" name="R2" size="75" placeholder="" required></td>
                </tr>

              </table>
              <h3>CODE:</h3>
              <textarea id="box" cols="100" rows="10"></textarea>
              <p><a class="btn btn-success btn-lg" onclick="generateCode2()" role="button">GENERATE CODE</a></p>


            </div>
            <button id="newField">
            add new field
            </button>
            </center>
          </div>
        </div>
      </div>
    </div>

如何使用javascript使用按钮使用户添加新字段？

1 个答案: