将输入值设置为相应的标签

Question

我希望在不使用id属性的情况下将每个输入值设置为它的相应标签。

这就是我所拥有的。这不起作用。

这会为每个标记设置＆＃34;姓氏＆＃34;。

的值

＆＃13;

＆＃13;

var form = document.forms['form'];
var inputs = form.querySelectorAll('input');
var p = document.querySelectorAll('#display .editable');

form.addEventListener('submit', function(e){
  e.preventDefault();
  inputs.forEach(function(input){
    for(var i = 0; i < p.length; i++){
      p[i].innerHTML = input.value;
    }
  });
});

＆＃13;

    <form id="form">
      <input type="text" class="text" placeholder="first name">
      <input type="text" class="text" placeholder="middle name">
      <input type="text" class="text" placeholder="last name">
      <button>SHOW</button>
    </form>

    <div id="display">
      <p class="editable"><!--first name--></p>
      <p class="editable"><!--middle name--></p>
      <p class="editable"><!--last name--></p>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不需要多个循环。单独使用它并使用两者的索引。

＆＃13;

＆＃13;

var form = document.forms['form'];
var inputs = form.querySelectorAll('input');
var p = document.querySelectorAll('#display .editable');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  for (var i = 0; i < p.length; i++) {
    p[i].innerHTML = inputs[i].value;
  }
});

＆＃13;

<form id="form">
  <input type="text" class="text" placeholder="first name">
  <input type="text" class="text" placeholder="middle name">
  <input type="text" class="text" placeholder="last name">
  <button>SHOW</button>
</form>

<div id="display">
  <p class="editable">
    <!--first name-->
  </p>
  <p class="editable">
    <!--middle name-->
  </p>
  <p class="editable">
    <!--last name-->
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

var form = document.forms['form'];
var inputs = form.querySelectorAll('input');
var p = document.querySelectorAll('#display .editable');

form.addEventListener('submit', function(e){
  e.preventDefault();
  inputs.forEach(function(input,i){
      p[i].innerHTML = input.value;

  });
});

    <form id="form">
      <input type="text" class="text" placeholder="first name">
      <input type="text" class="text" placeholder="middle name">
      <input type="text" class="text" placeholder="last name">
      <button>SHOW</button>
    </form>

    <div id="display">
      <p class="editable"><!--first name--></p>
      <p class="editable"><!--middle name--></p>
      <p class="editable"><!--last name--></p>
    </div>