対応するタグに入力値を設定する

Question

id属性を使用せずに、各入力値を対応するタグに設定したいとします。

これは私が持っているものです。これは機能しません。

これは、すべてのタグに「姓」という値を設定します。

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

<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>

Answer 1

複数のループの必要はありません。 1つ1つで行い、両方のインデックスを使用します。

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

<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>

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>