将元素从一个数组移动到另一个数组。 (JavaScript)答案

【问题标题】：Moving elements from one array to another. (JavaScript)将元素从一个数组移动到另一个数组。 (JavaScript)
【发布时间】：2020-11-04 01:45:36
【问题描述】：

所以基本上我有一个杂货清单和一个库存清单。我希望能够：

向任一列表添加项目。
从任一列表中删除项目。
将项目从一个列表移动到另一个列表。

每个列表都有自己的数组，当您“添加一个项目”到任一列表时，我有一个函数（nodeConstructor）将项目推送到其相应的数组并在所需的 div 中构建一个“项目元素”（杂货清单或库存清单）。

我遇到的问题是将一个项目从一个列表移动到另一个列表。当您单击“移动”按钮时，应该调用我的“nodeConstructor”函数，它应该基本上在另一个列表中重新创建选定的元素。有点这样做，除了项目值（inputVal）在 div 中呈现为“未定义”，而不是被移动的项目的值（但是它正确地从一个数组移动到另一个数组）。

另一个问题是，将商品从 Grocery List 移动到 Inventory List 会正确拼接 Grocery List 数组中的商品并将其推送到 Inventory List 数组，但是将商品从 Inventory List 移动到 Grocery List 两者都没有拼接数组中的项目，也不将其移动到 Grocery List 数组（我认为这与检查条件的顺序有关，但我不确定）。

如果有人能告诉我哪里出错了，我将不胜感激。此外，欢迎任何有关更简单方法实现此功能的建议。

这里是演示我的问题的 Codepen 的链接：https://codepen.io/TOOTCODER/pen/OJXQKGp?editors=1011

HTML

<label for="groceryInput">Add Grocery Item: </label>
<input id="groceryInput" type="text">
<button id="groceryInputBtn">Submit</button>

<label for="inventoryInput">Add Inventory Item: </label>
<input id="inventoryInput" type="text">
<input id="inventoryInputBtn" type="submit">

<div class="outputDiv" id="arr1Output"><h1>Grocery</h1></div>
<div class="outputDiv" id="arr2Output"><h1>Inventory</h1></div>

CSS

.outputDiv{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 25px 0 0 25px;
}

.outputDiv h1{
  text-align: center;
  text-decoration: underline;
}

JavaScript

const groceryInput = document.querySelector("#groceryInput");
const groceryInputBtn = document.querySelector("#groceryInputBtn");
const inventoryInput = document.querySelector("#inventoryInput");
const inventoryInputBtn = document.querySelector("#inventoryInputBtn");
const arr1Output = document.querySelector("#arr1Output");
const arr2Output = document.querySelector("#arr2Output");
const groceryList = [];
const inventoryList = [];

//add grocery item
groceryInputBtn.addEventListener("click", function(){
  nodeConstructor(groceryInput, groceryList, arr1Output, "newGroceryItemDiv", "newGroceryItem", "groceryDeleteBtnSpan", "groceryMoveBtnSpan")});

 arr1Output.addEventListener("click", controlBtns);

//add inventory item
inventoryInputBtn.addEventListener("click",  function(){
  nodeConstructor(inventoryInput, inventoryList, arr2Output, "newInventoryItemDiv", 
  "newInventoryItem", "inventoryDeleteBtnSpan", "inventoryMoveBtnSpan")});

   arr2Output.addEventListener("click", controlBtns);

//item element builder
function nodeConstructor(inputVal, list, output, divClass,itmClass, deleteClass, moveClass){
  const newItmDiv = document.createElement("div");
  newItmDiv.classList.add(divClass);
  const newItm = document.createElement("span");
  newItm.classList.add("itmClass");
  const deleteBtnSpan = document.createElement("span");
  deleteBtnSpan.innerHTML = "<i class='far fa-trash-alt'></i>";
  deleteBtnSpan.classList.add(deleteClass);
  const moveBtnSpan = document.createElement("span");
  moveBtnSpan.innerHTML = "<i class='fas fa-exchange-alt'></i>";
  moveBtnSpan.classList.add(moveClass);
  
  list.push(inputVal.value);
  
  for(let i=0;i<list.length;i++){
    newItm.innerText = list[i];
    }
  
  newItmDiv.appendChild(newItm);
  newItmDiv.appendChild(deleteBtnSpan);
  newItmDiv.appendChild(moveBtnSpan);
  output.appendChild(newItmDiv);
};


//delete and move buttons
function controlBtns(event){
  const clicked = event.target;
  for(let i=0;i<groceryList.length;i++){
    //grocery delete btn
    if(clicked.parentElement.parentElement.innerText==groceryList[i] && 
       clicked.parentElement.classList[0]=="groceryDeleteBtnSpan"){
       groceryList.splice(i,1);
       clicked.parentElement.parentElement.remove();
    }
    //grocery move btn
    if(clicked.parentElement.parentElement.innerText==groceryList[i] && 
       clicked.parentElement.classList[0]=="groceryMoveBtnSpan"){
      nodeConstructor(groceryList[i], inventoryList, arr2Output, "newInventoryItemDiv", "newInventoryItem", "inventoryDeleteBtnSpan", "inventoryMoveBtnSpan");
       inventoryList.push(groceryList[i]);
       groceryList.splice(i,1);
       clicked.parentElement.parentElement.remove();
    }
  }
      
      //inventory delete btn
    for(let i=0;i<inventoryList.length;i++){
      if(clicked.parentElement.parentElement.innerText==inventoryList[i] && 
       clicked.parentElement.classList[0]=="inventoryDeleteBtnSpan"){
       inventoryList.splice(i,1);
       clicked.parentElement.parentElement.remove();
    }
      //inventory move btn
      if(clicked.parentElement.parentElement.value==inventoryList[i] && 
       clicked.parentElement.classList[0]=="inventoryMoveBtnSpan"){
        nodeConstructor(inventoryList[i], groceryList, arr1Output, "newGroceryItemDiv", "newGroceryItem", "groceryDeleteBtnSpan", "groceryMoveBtnSpan");
       groceryList.push(inventoryList[i]);
       inventoryList.splice(i,1);
       clicked.parentElement.parentElement.remove();
    }
  }
  console.log("InventoryList: "+inventoryList);
  console.log("GroceryList: "+groceryList);
}

【问题讨论】：

标签： javascript html arrays list

【解决方案1】：

嘿，所以下面的代码至少可以与切换一起使用，您遇到的问题是您没有在移动按钮中调用 nodeConstructor，并且由于您的列表仅包含该值，因此没有更新任何内容。

所以我所做的是更新nodeConstructor 以同时获取输入值和您正在使用这条线移动的项目的值const nodeValue = typeof inputVal === 'object' ? inputVal.value : inputVal

然后在移动功能中我更新了两个移动功能。我在将旧值从列表中删除之前获取了旧值，然后我调用了nodeContructor，因此两个列表都使用该值进行了更新。

const groceryVal = groceryList[i]
      groceryList.splice(i,1);
             nodeConstructor(groceryVal, inventoryList, arr2Output, "newInventoryItemDiv", "newInventoryItem", "inventoryDeleteBtnSpan", "inventoryMoveBtnSpan");
      clicked.parentElement.parentElement.remove();

就你可以做什么而言。我认为您可能可以将点击事件添加到更新自己位置的移动按钮，这样您就不必拥有那么大的功能。

const groceryInput = document.querySelector("#groceryInput");
    const groceryInputBtn = document.querySelector("#groceryInputBtn");
    const arr1Output = document.querySelector("#arr1Output");

    const inventoryInput = document.querySelector("#inventoryInput");
    const inventoryInputBtn = document.querySelector("#inventoryInputBtn");
    const arr2Output = document.querySelector("#arr2Output");
    const groceryList = [];
    const inventoryList = [];
    let nodeList = [];
    groceryInputBtn.addEventListener("click", function(){
      nodeConstructor(groceryInput, groceryList, arr1Output, "newGroceryItemDiv", "newGroceryItem", "groceryDeleteBtnSpan", "groceryMoveBtnSpan");
    });

    arr1Output.addEventListener("click", controlBtns);

    inventoryInputBtn.addEventListener("click",  function(){
      nodeConstructor(inventoryInput, inventoryList, arr2Output, "newInventoryItemDiv", "newInventoryItem", "inventoryDeleteBtnSpan", "inventoryMoveBtnSpan");
    });
    arr2Output.addEventListener("click", controlBtns);


    function nodeConstructor(inputVal, list, output, divClass,itmClass, deleteClass, moveClass){
      const newItmDiv = document.createElement("div");
      newItmDiv.classList.add(divClass);
      const newItm = document.createElement("span");
      newItm.classList.add("itmClass");
      const deleteBtnSpan = document.createElement("span");
      deleteBtnSpan.innerHTML = "<i class='far fa-trash-alt'></i>";
      deleteBtnSpan.classList.add(deleteClass);
      const moveBtnSpan = document.createElement("span");
      moveBtnSpan.innerHTML = "<i class='fas fa-exchange-alt'></i>";
      moveBtnSpan.classList.add(moveClass);
      
      const nodeValue = typeof inputVal === 'object' ? inputVal.value :
      inputVal
      list.push(nodeValue);
      
      for(let i=0;i<list.length;i++){
        newItm.innerText = list[i];
        }
      newItmDiv.appendChild(newItm);
      newItmDiv.appendChild(deleteBtnSpan);
      newItmDiv.appendChild(moveBtnSpan);
      output.appendChild(newItmDiv);
    };


    function controlBtns(event){
      const clicked = event.target;
      for(let i=0;i<groceryList.length;i++){
        //groceryDeleteBtn
        if(clicked.parentElement.parentElement.innerText==groceryList[i] && 
           clicked.parentElement.classList[0]=="groceryDeleteBtnSpan"){
          groceryList.splice(i,1);
          clicked.parentElement.parentElement.remove();
        }
        //groceryMoveBtn
        if(clicked.parentElement.parentElement.innerText==groceryList[i] && 
           clicked.parentElement.classList[0]=="groceryMoveBtnSpan"){
          const groceryVal = groceryList[i]
          groceryList.splice(i,1);
                 nodeConstructor(groceryVal, inventoryList, arr2Output, "newInventoryItemDiv", "newInventoryItem", "inventoryDeleteBtnSpan", "inventoryMoveBtnSpan");
          clicked.parentElement.parentElement.remove();
     
        }
      }
      
      for(let i=0;i<inventoryList.length;i++){
        //inventoryDeleteBtn
        if(clicked.parentElement.parentElement.innerText==inventoryList[i] && 
           clicked.parentElement.classList[0]=="inventoryDeleteBtnSpan"){
          inventoryList.splice(i,1);
          clicked.parentElement.parentElement.remove();
        }
        //inventoryMoveBtn
        if(clicked.parentElement.parentElement.innerText==inventoryList[i] && clicked.parentElement.classList[0]=="inventoryMoveBtnSpan"){
          const inventoryVal= inventoryList[i]
          inventoryList.splice(i,1);
             nodeConstructor(inventoryVal, groceryList, arr1Output, "newGroceryItemDiv", "newGroceryItem", "groceryDeleteBtnSpan", "groceryMoveBtnSpan");
          clicked.parentElement.parentElement.remove();
            
        }
      }
      console.log("InventoryList: "+inventoryList);
      console.log("GroceryList: "+groceryList);
    }

【讨论】：