Question

因此，我正在尝试构建一个表单，当您单击“家庭”时，它将添加一个数字输入。根据该数字输入，它将建立更多的文本输入。例如，如果单击“家庭”，然后在输入的数字中键入4。它将创建4个不同的文本条目，要求您输入家人的名字。所以我的问题是，您可以创建一个元素，然后将该元素的值存储在变量中以供以后使用。这是我的代码： HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
     crossorigin="anonymous">
    <style>
    </style>
</head>

<body>
    <div class = "container">
    <form>
      <p>Is this membership for an individual or a family?</p>
      <p>Individual - $60: <input type = "radio" id = "individual-selector" value = "individual" name = "type"></p>
      <p>Family - $150: <input type = "radio" id = "family-individual-selector" value = "family" name = "type"></p>
      <div id = "family-number"></div>
      <div class = "form-start">
        <p>Full Name: <input type = "text" required name = "name" placeholder = "First Last"></p>
        <p>Address: <input type = "text" required name = "address" placeholder = "eg - 123 Main Street"></p>
        <p>City: <input type = "text" required name = "city" placeholder = "New York"></p>
        <p>State: <input type = "text" required name = "state" placeholder = "NY"></p>
        <p>Zip Code: <input type = "text" required name = "zip" placeholder = "10030"></p>
        <p>Phone Number: <input type="tel" id="phone" name="phone" placeholder="123-459-6780" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></p>
        <p>Email: <input type = "email" name = "email" id = "email" placeholder = "random1234@gmail.com" required></p>
      </div>
      <input type = "submit" value = "Purchase">
      <input type = "reset">
    </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  </body>
</html>

JS：

var family = document.querySelector("#family-individual-selector");
var individual = document.querySelector("#individual-selector");
var form = document.querySelector(".form-start");
var familyNumber = document.querySelector("#family-number");
individual.addEventListener("click",function(){
    familyNumber.innerHTML = "";
})
family.addEventListener("click",function(){
  familyNumber.innerHTML = "<p>Input Number Of Family Members: <input type = 'number' id = 'family-num'></p>"
  var familyNum = document.querySelector("#family-num");
  })

Answer 1

您可以通过append功能将jquery用于此任务

首先，我们需要创建父元素来存储输入成员

<div id="family-member"></div>

然后获取需要添加的家庭人数

// create array to store the input member
var families = [];
$("#family-num").on('change', function() {
    // reset the view and the array every change detected
    $("#family-member").empty();
    families = [];
    for(let i = 1; i<=this.value; i++) {
      $("#family-member").append("<p>Member "+ (i) +": <input type = 'text' id = 'family-member-"+(i)+"'></p>")
      families.push($("#family-member-"+i));
    }
})

使用此方法，您会将新输入追加到#family-member

最后，您可以使用families数组，如果要获取它的值，可以这样做

var family_values = [];
families.forEach(function(member) {
   family_values.push(member.value);
});

Answer 2

您可以使用value属性访问输入框的值
变更
var familyNum = document.querySelector("#family-num");
到
var familyNum = document.querySelector("#family-num").value;
或在jQuery
中 var familyNum = $("family_num").val()

Answer 3

TL; DR

使用document.createElement()创建<input>元素，然后使用Node.appendChild()将其附加到DOM中。

一旦获得了许多元素，就可以创建那么多<input>元素并将其添加到DOM。

HTML：

<div id="inputContainer"></div>

JS：

let inputContainer =
document.querySelector('#inputContainer');


function createInputs(n){
    for(let i= i<n;i++){
       let input = 
       document.createElement('input');
       inputContainer.appendChild(input);
    }
}

您可以在Javascript中使用DOM操作添加元素，然后访问该元素吗？

3 个答案: