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

如何在javascript中将输入值设置为对象属性的值

3 个答案: