如何从一个数组中选择对象成为单独数组中的对象

Question

我有一个要放入一个盒子的项目列表，我有一个空盒子，项目列表和空盒子是两个不同的数组，这些项目是用户输入放置的数组中的对象。在添加的每个项目旁边都有一个附加的“添加”按钮，然后应该将该选定的对象复制到空框数组中。我如何做到这一点？

我试图附加添加按钮的父节点并推送到新数组，但它只是推送了“Li”元素而不是对象本身

<div>
    <input id="userinput" type="number" placeholder="Enter Capacity">
    <button id="enter">Enter</button>
</div><br>
<div>
    <p>Items Information:</p>
    <input id="itemName" type="text" placeholder="enter item name">
    <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
    <input id="itemValue" type="number" placeholder="enter item value">
    <button onclick="addListAfterClick()" id="value">Enter</button>
</div>
    <ul id="list">LIST OF 20 ITEMS TO CHOOSE FROM
    </ul>
    <ul id="knap"> LIST OF ITEMS IN KNAPSACK
    </ul>
<div>

let addValues = () =>{
         inputs = {
            name : input2.value,
            weight : parseFloat(input3.value),
            value : parseInt(input4.value)
        }

        arr_items.push(inputs);
        console.log(arr_items);
createListElement();
}
let createListElement = () => {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input2.value));
    ul.appendChild(li);

    let btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Add"));
    li.appendChild(btn);
    btn.onclick = addTo;

}
function addTo(){
    var li2 = document.createElement("li");
    li2.appendChild(document.createTextNode(input2.value));
    ul2.appendChild(li2);
    knap.push(this.parentNode);
    console.log(knap);
}

我希望任何点击的对象都被复制到“knap”数组中

Answer 1

首先，你的问题令人困惑，你的代码不是很清楚，因为你没有定义你在代码中调用的大部分变量和函数，我发现很难理解你的意思。

如果你想这样做，你必须实际跟踪你正在创建的所有列表项，为此我创建了一个 listCount 变量，每当单击“添加”按钮时该变量就会递增，我设置了“添加”按钮到 listCount 变量的当前值。因此，当单击“添加”按钮时，我们检索 id 并使用它从“arr_list”中选择要推送到“knap”的数组。这是您的代码的修改：

arr_items = new Array();
    knap = new Array();
        let input2 = document.getElementById("itemName");
        let input3 = document.getElementById("itemWeight");
        let input4 = document.getElementById("itemValue");
        let ul = document.getElementById("list");
        let ul2 = document.getElementById("knap")
        let listCount = 0; // create a listCount variable to track the list items created
    let addValues = () =>{
        
         inputs = {
            name : input2.value,
            weight : parseFloat(input3.value),
            value : parseInt(input4.value)
        }

        arr_items.push(inputs);
        console.log(arr_items);
createListElement();
}
let createListElement = () => {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input2.value));
    ul.appendChild(li);

    let btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Add"));
    li.appendChild(btn);
    btn.id = listCount; // set the value of listCount variable as the id of the button
    btn.onclick = addTo;
    listCount++; // increment the list count variable

}
function addTo(){
    var li2 = document.createElement("li");
    var id = parseInt(this.id); // retrieve the id of the button
    li2.appendChild(document.createTextNode(input2.value));
    ul2.appendChild(li2);
    knap.push(arr_items[id]); //use the id of the button to select array to push to knap from the array item
    console.log(knap);
}

<div>
    <input id="userinput" type="number" placeholder="Enter Capacity">
    <button id="enter">Enter</button>
</div><br>
<div>
    <p>Items Information:</p>
    <input id="itemName" type="text" placeholder="enter item name">
    <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
    <input id="itemValue" type="number" placeholder="enter item value">
    <button onclick="addValues()" id="value">Enter</button>
</div>
    <ul id="list">LIST OF 20 ITEMS TO CHOOSE FROM
    </ul>
    <ul id="knap"> LIST OF ITEMS IN KNAPSACK
    </ul>
<div>

我相信这应该会按您的预期工作