Блог

Главная - Вопросы по программированию - Перемещение элементов из одного массива в другой. (JavaScript)

Перемещение элементов из одного массива в другой. (JavaScript)

#javascript #html #arrays #list

#javascript #HTML #массивы #Список

Вопрос:

Итак, в основном у меня есть список покупок и список инвентаря. Я хочу иметь возможность:

  1. Добавьте элемент в любой список.
  2. Удалите элемент из любого списка.
  3. Перемещение элемента из одного списка в другой.

У каждого списка есть свой собственный массив, и когда вы «добавляете элемент» в любой список, у меня есть функция (nodeConstructor), которая помещает элемент в соответствующий массив и создает «элемент элемента» в нужном div (список покупок или список инвентаря).

Проблема, с которой я сталкиваюсь, заключается в перемещении элемента из одного списка в другой. Когда вы нажимаете кнопку «Переместить», предполагается, что вызывается моя функция «nodeConstructor», и она должна в основном воссоздать выбранный элемент в другом списке. Это как бы делает это, за исключением того, что значение элемента (inputVal) отображается как ‘undefined’ в div, а не значение элемента, который был перемещен (однако он правильно перемещается из массива в массив).

Другая проблема заключается в том, что при перемещении элемента из списка покупок в список инвентаризации элемент из массива списка покупок правильно соединяется и помещается в массив списка инвентаризации, но при перемещении элемента из списка инвентаризации в список покупок элемент не соединяется из массива и не перемещается в список покупокмассив (я думаю, это как-то связано с порядком проверки условий, но я не уверен).

Если бы кто-нибудь мог показать мне, где я ошибаюсь, я был бы очень признателен. Кроме того, будут приветствоваться любые предложения о более простом способе достижения этой функциональности.

Вот ссылка на 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] amp;amp; 
       clicked.parentElement.classList[0]=="groceryDeleteBtnSpan"){
       groceryList.splice(i,1);
       clicked.parentElement.parentElement.remove();
    }
    //grocery move btn
    if(clicked.parentElement.parentElement.innerText==groceryList[i] amp;amp; 
       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] amp;amp; 
       clicked.parentElement.classList[0]=="inventoryDeleteBtnSpan"){
       inventoryList.splice(i,1);
       clicked.parentElement.parentElement.remove();
    }
      //inventory move btn
      if(clicked.parentElement.parentElement.value==inventoryList[i] amp;amp; 
       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);
}

Ответ №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] amp;amp; 
           clicked.parentElement.classList[0]=="groceryDeleteBtnSpan"){
          groceryList.splice(i,1);
          clicked.parentElement.parentElement.remove();
        }
        //groceryMoveBtn
        if(clicked.parentElement.parentElement.innerText==groceryList[i] amp;amp; 
           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] amp;amp; 
           clicked.parentElement.classList[0]=="inventoryDeleteBtnSpan"){
          inventoryList.splice(i,1);
          clicked.parentElement.parentElement.remove();
        }
        //inventoryMoveBtn
        if(clicked.parentElement.parentElement.innerText==inventoryList[i] amp;amp; 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);
    }