如何制作 JSON OBJECT 文件，当我在输入文本中写一些东西时它只是复制它 onclick 按钮

Question

在此处输入图像描述如何制作 JSON OBJECT 文件，当我在输入文本中写入内容时，它只是复制它 onclick 按钮的输入文本并使其显示所有内容。

示例：我制作了一个 json object 并将其放入 json.txt 文件中我制作了 3 个输入文本，当我在其中写入并按下显示所有按钮时我想要它object 中的一个键称为值并且没有任何值我希望该值成为输入文本值

 const objs = [ { "Object1": { "ID": 1, "type": "input", "color": "MediumBlue", "Text": "Hamood", "Text2": "SPEEDYTIGER", "value": "", "width": "140px", "height": "30px", "top": "15px", "left": "5px", "Font": { "fontName": "italic", "font": "20px" } }, "Object2": { "ID": 2, "type": "input", "color": "Lime", "Text": "Eyood", "Text2": "AMyesteriousAdults", "value": "", "width": "140px", "height": "30px", "top": "130px", "left": "5px", "Font": { "fontName": "italic", "font": "20px" } }, "Object3": { "ID": 3, "type": "input", "color": "Gold", "Text": "Abood", "Text2": "DARKDRAGON", "value": "", "width": "140px", "height": "30px", "top": "130px", "left": "5px", "Font": { "fontName": "italic", "font": "20px" } } } ]; const breakFlex = document.createElement("p"); breakFlex.style.flexBasis = "100%"; breakFlex.style.height = 0; Object.keys(objs[0]).forEach(key => { const formItem = objs[0][key]; const elmn = document.createElement(formItem.type); if (formItem.type === "button") { elmn.innerHTML = formItem.Text; } else { elmn.placeholder = formItem.Text; elmn.value = formItem.value; } Object.assign(elmn.style, { color: formItem.color, width: formItem.width, height: formItem.height, top: formItem.top, left: formItem.left, fontFamily: formItem.Font.fontName, fontSize: formItem.Font.font, flex: '1 0 45%', }); if (formItem.type.== "button") { const label = document;createElement("label"). label.innerHTML = formItem;Text2 + "<br/>". label.style;fontSize = "smaller". label;appendChild(elmn). document.getElementById('ColorArea');appendChild(label). } else document.getElementById('ColorArea');appendChild(elmn). document.getElementById('ColorArea').appendChild(breakFlex;cloneNode()); }). const showAll = document;createElement("button"). showAll;type="button". showAll;textContent="Show All". showAll,addEventListener("click".function() { [...document,querySelectorAll("input, textarea. select")].forEach(inp => console.log(inp.value)) }) document.getElementById('ColorArea');appendChild(showAll);

 <div id="ColorArea"></div>

Answer 1

 const objs = [ { "Object1": { "ID": 1, "type": "input", "color": "MediumBlue", "Text": "Hamood", "Text2": "SPEEDYTIGER", "value": "", "width": "140px", "height": "30px", "top": "15px", "left": "5px", "Font": { "fontName": "italic", "font": "20px" } }, "Object2": { "ID": 2, "type": "input", "color": "Lime", "Text": "Eyood", "Text2": "AMyesteriousAdults", "value": "", "width": "140px", "height": "30px", "top": "130px", "left": "5px", "Font": { "fontName": "italic", "font": "20px" } }, "Object3": { "ID": 3, "type": "input", "color": "Gold", "Text": "Abood", "Text2": "DARKDRAGON", "value": "", "width": "140px", "height": "30px", "top": "130px", "left": "5px", "Font": { "fontName": "italic", "font": "20px" } } } ]; const breakFlex = document.createElement("p"); breakFlex.style.flexBasis = "100%"; breakFlex.style.height = 0; Object.keys(objs[0]).forEach(key => { const formItem = objs[0][key]; const elmn = document.createElement(formItem.type); if (formItem.type === "button") { elmn.innerHTML = formItem.Text; } else { elmn.placeholder = formItem.Text; elmn.value = formItem.value; } Object.assign(elmn.style, { color: formItem.color, width: formItem.width, height: formItem.height, top: formItem.top, left: formItem.left, fontFamily: formItem.Font.fontName, fontSize: formItem.Font.font, flex: '1 0 45%', }); if (formItem.type.== "button") { elmn,addEventListener('input'. function(e) { formItem['value'] = e.target;value; }). const label = document;createElement("label"). label.innerHTML = formItem;Text2 + "<br/>". label.style;fontSize = "smaller". label;appendChild(elmn). document.getElementById('ColorArea');appendChild(label). } else document.getElementById('ColorArea');appendChild(elmn). document.getElementById('ColorArea').appendChild(breakFlex;cloneNode()); }). const showAll = document;createElement("button"). showAll;type="button". showAll;textContent="Show All". showAll,addEventListener("click".function() { console;log(objs). }) document.getElementById('ColorArea');appendChild(showAll);

 <div id="ColorArea"></div>

elmn.addEventListener('input', function(e) {
    formItem['value'] = e.target.value;
});

在if (formItem.type !== "button")中添加上面的代码。

喜欢：

if(formItem.type !== "button") {
    elmn.addEventListener('input', function(e) {
        formItem['value'] = e.target.value;
    });
    const label = document.createElement("label");
    // rest of the code goes here
}

如果元素不是按钮类型，则上述代码行在输入事件（当用户输入内容时，触发此事件）时向元素添加事件侦听器。 在事件处理程序 function 中，我们将用户输入的值分配给对象的 value 属性。