В Javascript вы можете добавить элемент, используя DOM Manipulation, а затем получить доступ к этому элементу? - PullRequest
Новая
       0

В Javascript вы можете добавить элемент, используя DOM Manipulation, а затем получить доступ к этому элементу?

0 голосов
/ 19 апреля 2020

Итак, я пытаюсь создать форму, которая при нажатии на семейство добавит ввод числа. Основываясь на вводе этого числа, он будет создавать больше текстовых записей. Например, если я нажму на семейство, то наберу 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");
  })

Ответы [ 3 ]

0 голосов
/ 19 апреля 2020

Доступ к значениям полей ввода осуществляется с помощью свойства value
. Измените
var familyNum = document.querySelector("#family-num");
на
var familyNum = document.querySelector("#family-num").value;
или введите jQuery
var familyNum = $("family_num").val()

0 голосов
/ 19 апреля 2020

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);
    }
}
0 голосов
/ 19 апреля 2020

вы можете использовать jquery для этой задачи с append функцией

сначала нам нужно создать родительский элемент для хранения входного элемента 

<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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...