はどのように私は、オブジェクトのプロパティの値に入力値を設定したいのjavascript

Question

内のオブジェクトのプロパティの値に入力値を設定するために、ここで は、私もここにコードを置く
jsfiddleのコードは、次のとおりです。
HTML

<div id="contenu"></div> 

JS

// create the button 
var contenu = document.getElementById("contenu"); 
var btn = document.createElement("button"); 
btn.textContent = "add"; 
contenu.appendChild(btn); 

// click the button to create 2 inputs and submit 
btn.addEventListener("click", function(){ 
    // create 2 inputs and submit 
    var name = document.createElement("input"); 
    name.placeholder = "enter a name"; 
    var age = document.createElement("input"); 
    age.placeholder = "enter the age"; 
    var submit = document.createElement("input"); 
    submit.type = "submit"; 
    submit.value = "submit"; 
    var form = document.createElement("form"); 
    form.method = "post"; 
    form.appendChild(name); 
    form.appendChild(age); 
    form.appendChild(submit); 
    contenu.appendChild(form); 

    // create a new empty table 
    var newTable = []; 
    var newObject = {}; 
    newObject.name = name.value;//"Tom" will work 
    newObject.age = age.value;//20 will work 
    newTable.push(newObject); 

    // submit the form to show the input value in html 
    form.addEventListener("submit", function(e){ 
     newTable.forEach(function(table){ 
      e.preventDefault(); 
      var pElt = document.createElement("p"); 
      pElt.innerHTML = table.name + " " + table.age; 
      contenu.appendChild(pElt); 
     }); 
    }); 
}); 

目的：2つの入力を表示するために "追加" ボタンをクリックして、ボタン "提出" の名前と年齢を入力してください"submit"をクリックしてdivに表示すると、入力値がオブジェクトのプロパティ値（newObject.name = name.value;とnewObject.age = age.value;）になりますが、それはうまく動作しません。

Answer 1

私はあなたのフィドルを固定し、あなたはここでそれをチェックアウトすることができます。

https://jsfiddle.net/o08mua1y/

form.addEventListener("submit", function(e){ 
     newObject.name = name.value;//"Tom" will work 
     newObject.age = age.value;//20 will work 
     newTable.forEach(function(table){ 
      e.preventDefault(); 
      var pElt = document.createElement("p"); 
      pElt.innerHTML = table.name + " " + table.age; 
      contenu.appendChild(pElt); 
     }); 
    }); 

を問題は、あなたがいることをリスナーに名前の値、および年齢のフィールドを設定しようとしているということです入力の提出時に発生するリスナーではなく、入力フィールドを作成します。これらの値をサブミットリスナー内に設定すると、forEachループの前に値が設定され、意図したとおりにHTMLに表示されます。

Answer 2

nameおよびageは、newObjectを作成した時点で値がありません。入力フィールドにkeyupまたは​​またはchangeのようなイベントリスナーを接続して、オブジェクト内の値を設定する関数を起動する必要があります。

Answer 3

あなたが行ったことはわかりませんが、見てみましょう。

// create de button 
var contenu = document.getElementById("contenu"); 
var btn = document.createElement("button"); 
btn.textContent = "add"; 
contenu.appendChild(btn); 

// click the button to create 2 inputs and submit 
btn.addEventListener("click", function(){ 
// create 2 inputs and submit 
var name = document.createElement("input"); 
name.placeholder = "enter a name"; 
var age = document.createElement("input"); 
age.placeholder = "enter the age"; 
var submit = document.createElement("input"); 
submit.type = "submit"; 
submit.value = "submit"; 
var form = document.createElement("form"); 
form.method = "post"; 
form.appendChild(name); 
form.appendChild(age); 
form.appendChild(submit); 
contenu.appendChild(form); 

// create a new empty table 
var newTable = []; 


// submit the form to show the input value in html 
form.addEventListener("submit", function(e){ 
    var newObject = {}; 
    newObject.name = name.value;//"Tom" will work 
    newObject.age = age.value;//20 will work 
    newTable.push(newObject); 
    var pElt = document.createElement("p"); 
    pElt.innerHTML = newObject.name + " " + newObject.age; 
    contenu.appendChild(pElt); 
    e.preventDefault(); 
}); 
});