javascript - 使用动态 ID 和输入值创建段落

Question

我正在根据两个输入创建两个段落，但无法将输入中的内容放入段落中。

这是代码:

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

});

我还在简单的 Codepen 上创建了代码:https://codepen.io/fabiozanchi/pen/PJyeap

谢谢!

Answer 1

Codepen

这是我所做的:

1. 修复了第 12 行和第 13 行的一些语法。

原版

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

新

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

我在第 7 行添加了 '+$('#name').val()+' 和 '+$('#number').val() +' 到第 9 行，p 标记之间。

我还更改了您的号码字段的占位符文本。一切似乎都运转良好。

注释

除了一些语法错误之外，我没有发现任何重大问题。

新代码

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

});