Créer des paragraphes avec l'ID dynamique et la valeur des entrées

Question

Je crée deux paragraphes à partir de deux entrées, mais je ne peux pas mettre le contenu de l'entrée dans le paragraphe.

Voici le code:

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s"> 
    <div class="row"> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" class="form-control custom-input-form" id="name" placeholder="Name"> 
     </div> 
     </div> 
    </div> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="number" class="form-control my-ip" id="number" placeholder="Name"> 
     </div> 
     </div> 
     <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button> 
    </div> 
    </div> 
</form> 

<div class="row"> 
    <div class="col-6" id="new-names"> 
    </div> 
    <div class="col-6" id="new-numbers"> 
    </div> 
</div> 

JS

var countName = 0; 
var countNumber = 0; 

$('#add-new').on('click', function(e) { 
    e.preventDefault(); 
    $('#new-names').append('<p id="new-name-'+countName+'"></p>'); 
    countName++; 
    $('#new-numbers').append('<p id="new-number-'+countNumber+'"></p>'); 
    countNumber++; 

    $('#"new-name'+countName+'"').text($('#name').val()); 
    $('#"new-number'+countNumber+'"').text($('#number').val()); 

}); 

J'ai aussi créé sur Codepen simple avec le code: https://codepen.io/fabiozanchi/pen/PJyeap

Merci!

Answer 1

Codepen

Voici ce que je l'ai fait:

1. fixe une syntaxe sur les lignes 12 et 13.

ORIGINAL

$('#"new-name'+countName+'"').text($('#name').val()); 
$('#"new-number'+countNumber+'"').text($('#number').val()); 

NOUVEAU

$('#new-name'+countName).text($('#name').val()); 
$('#new-number'+countNumber).text($('#number').val()); 

2. I ajouté '+$('#name').val()+' à la ligne 7 et '+$('#number').val()+' à la ligne 9, entre les balises p. J'ai également modifié le texte de l'espace réservé de votre champ numérique. Tout semble fonctionner correctement.

Remarques

Mis à part quelques erreurs de syntaxe, je n'a pas remarqué de problème majeur.

Nouveau Code

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s"> 
    <div class="row"> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" class="form-control custom-input-form" id="name" placeholder="Name"> 
     </div> 
     </div> 
    </div> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="number" class="form-control my-ip" id="number" placeholder="Number"> 
     </div> 
     </div> 
     <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button> 
    </div> 
    </div> 
</form> 

<div class="row"> 
    <div class="col-6" id="new-names"> 
    </div> 
    <div class="col-6" id="new-numbers"> 
    </div> 
</div> 

JavaScript

var countName = 0; 
var countNumber = 0; 

$('#add-new').click(function(e) { 

    e.preventDefault(); 
    $('#new-names').append('<p id="new-name-'+countName+'">'+$('#name').val()+'</p>'); 
    countName++; 
    $('#new-numbers').append('<p id="new-number-'+countNumber+'">'+$('#number').val()+'</p>'); 
    countNumber++; 

    $('#new-name'+countName).text($('#name').val()); 
    $('#new-number'+countNumber).text($('#number').val()); 

}); 

Answer 2

Essayez suivante:

var countName = 0; 
var countNumber = 0; 

$('#add-new').on('click', function(e) { 
    e.preventDefault(); 
    $('#new-names').append('<p id="new-name-' + (countName++) + '">' + $('#name').val() + '</p>'); 
    $('#new-numbers').append('<p id="new-number-' + (countNumber++) + '">' + $('#number').val() + '</p>'); 
}); 

Essayez de faire des interactions avec un minimum comme DOM possible. Deux .append et deux appels .val suffisent ici.