Как выбрать объекты из одного массива, чтобы стать объектом в отдельном массиве

Question

У меня есть список элементов, которые нужно поместить в блок, и у меня есть пустой блок, список элементов и пустой блок - это два разных массива, элементы - это объекты в массиве, введенные пользовательским вводом.Рядом с каждым добавленным элементом к нему добавлена ​​кнопка «Добавить», которая затем должна скопировать выбранный объект в массив пустых ящиков.Как мне этого добиться?

Я пытался добавить parentNode кнопки add и нажать на новый массив, но он просто выдвинул элемент "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.Поэтому, когда нажимается кнопка «Добавить», мы получаем идентификатор и используем его для выбора массива, который нужно нажать, чтобы «выбить» из «arr_list».Вот модификация вашего кода:

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>

Я считаю, что должно работать так, как вы ожидали