如何从一个数组中选择对象以成为单独数组中的对象 [英] How to select objects from one array to become object in a separate array

问题描述

我有一个项目列表放在一个框中，我有一个空框，项目列表和空框是两个不同的数组，项目是由用户输入放置的数组中的对象。除了添加的每个项目旁边还有一个添加按钮，然后应该将所选对象复制到空框数组中。我如何实现这一点？

I have a list of items to put in a box and i have an empty box, the list of items and the empty box are two different arrays, the items are objects in the array put by user inputs. Beside every item added is an "add" button appended to it which should then copy that selected object into the empty box array. How do i achieve this?

我试图追加添加按钮的parentNode并推送到新数组但它只是推送了Li元素而不是对象本身

i have tried to append the parentNode of the add button and push to the new array but it just pushed the "Li" element instead of the object itself

<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数组

I expect any object clicked to be copied to the "knap" array

推荐答案

首先，你的问题很混乱，你的代码不是那么明确，因为你没有定义大部分的你在代码中调用的变量和函数，我发现很难理解你的意思。

如果你想这样做，你必须真正保持跟踪您正在创建的所有列表项，为此，我创建了一个listCount变量，只要单击添加按钮，该变量就会递增，我将添加按钮的ID设置为listCount变量的当前值。因此，当单击添加按钮时，我们检索id并使用它来选择从arr_list推送到knap的阵列。以下是对代码的修改：

If you want to do this, you have to actually keep track of all the list items you are creating, to do this I created a listCount variable that increments whenever the "Add" button is clicked, I set the id of the "Add" button to the current value of the listCount variable. So when "Add" button is clicked, we retrieve id and use it to select which array to push to "knap" from the "arr_list". Here is the modification of your code:

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>

我认为应该按预期工作

这篇关于如何从一个数组中选择对象以成为单独数组中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！