如何制作 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 屬性。