如何在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個輸入，然后單擊“提交”按鈕，輸入名稱和年齡，然后單擊“提交”以在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或keydown或者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();
});
});