无法找出为什么该值未定义

Question

所以我有一个功能，该功能旨在在单击元素标签时将其删除，并从单独的列表中删除其各自的内容/成分。一切正常，部分，在浏览器上，当我检查控制台有一个 TypeError 并且我似乎无法找出原因。我在过去 3 个小时里一直在解决它，但找不到解决方案，请有人帮忙。下面是代码。您需要在每个单词之后输入“，”来创建一个新标签，并且由于没有添加 css，您需要单击该单词将其删除（输入后直接在行中的单词）。

const   ingredientsInput = document.querySelector('#ingredients'),
        ingredientsContainer = document.querySelector('.ingredients__tag');
let     ingredientsArray = [];

ingredientsInput.addEventListener('input', () => {
    if (ingredientsInput.value.includes(',')) {
        let v = ingredientsInput.value.replace(',', '');

        if(v != '' && v != ',') {
            let s = document.createElement('span');
    
            s.setAttribute('class', 'tag__item');
            s.innerHTML = v;
            ingredientsContainer.appendChild(s);
    
            ingredientsArray.push(v);

            recipesInclude(v, true);

            ingredientsInput.value = "";    
        } else if(v = ',') {    
            ingredientsInput.value = "";
        }

        removeItem();
        
        console.log(ingredientsArray);
    }
});

function removeItem() {    
    const ingredientsItem = ingredientsContainer.querySelectorAll('.tag__item');
    
    ingredientsItem.forEach(e => {
        e.addEventListener('click', () => {
            recipesInclude(e.innerHTML, false);
            removeArray(ingredientsArray, e.innerHTML, false);
            e.remove();
    
            console.log(ingredientsArray);
        });
    });
}

function removeArray(array, index, result) {
    for(i = 0; i < array.length; i++){     
        if(array[i] === index) {     
            array.splice(i, 1); 

            if(result) {
                return array;
            }
        }    
    }
}

function recipesInclude(ingredient, statement) {
    ingredientLead = document.querySelector('.list');

    if(statement) {
        if(ingredientLead.innerText.length > 0) {
            ingredientLead.innerHTML += ', ' + ingredient;
        } else {
            ingredientLead.innerHTML += ingredient;
        }
    } else {
        ingredientSplit = ingredientLead.innerText.split(", ");        

        if(ingredientSplit.length > 1) {
            ingredientLead.innerHTML = removeArray(ingredientSplit, ingredient, true).join(", ");
        } else {
            ingredientLead.innerHTML = removeArray(ingredientSplit, ingredient, true);            
        }
    }
}

<input type="text" name="ingredients" id="ingredients" onkeyup="this.setAttribute('value', this.value);" placeholder="" class="form__control">
<div class="ingredients__tag"></div>
<p class="list"></p>

Answer 1

检查此代码，这可能会有所帮助 当没有条件匹配时我添加了返回数组

const ingredientsInput = document.querySelector('#ingredients'),
  ingredientsContainer = document.querySelector('.ingredients__tag');
let ingredientsArray = [];

ingredientsInput.addEventListener('input', () => {
  if (ingredientsInput.value.includes(',')) {
    let v = ingredientsInput.value.replace(',', '');

    if (v != '' && v != ',') {
      let s = document.createElement('span');

      s.setAttribute('class', 'tag__item');
      s.innerHTML = v;
      ingredientsContainer.appendChild(s);

      ingredientsArray.push(v);

      recipesInclude(v, true);

      ingredientsInput.value = "";
    } else if (v = ',') {
      ingredientsInput.value = "";
    }

    removeItem();

    //console.log(ingredientsArray);
  }
});

function removeItem() {
  const ingredientsItem = ingredientsContainer.querySelectorAll('.tag__item');

  ingredientsItem.forEach(e => {
    e.addEventListener('click', () => {
      recipesInclude(e.innerHTML, false);
      removeArray(ingredientsArray, e.innerHTML, false);
      e.remove();

      console.log(ingredientsArray);
    });
  });
}

function removeArray(array, index, result) {
  for (i = 0; i < array.length; i++) {
    if (array[i] === index) {
      array.splice(i, 1);

      if (result) {
        return array;
      }
    }
  }
  return array;
}

function recipesInclude(ingredient, statement) {
  ingredientLead = document.querySelector('.list');

  if (statement) {
    if (ingredientLead.innerText.length > 0) {
      ingredientLead.innerHTML += ', ' + ingredient;
    } else {
      ingredientLead.innerHTML += ingredient;
    }
  } else {
    ingredientSplit = ingredientLead.innerText.split(", ");

    if (ingredientSplit.length > 1) {
      ingredientLead.innerHTML = removeArray(ingredientSplit, ingredient, true).join(", ");
    } else {
      ingredientLead.innerHTML = removeArray(ingredientSplit, ingredient, true);
    }
  }
}

<input type="text" name="ingredients" id="ingredients" onkeyup="this.setAttribute('value', this.value);" placeholder="" class="form__control">
<div class="ingredients__tag"></div>
<p class="list"></p>