无法找出为啥该值未定义

Posted 2023-03-16

【中文标题】无法找出为啥该值未定义

【英文标题】：unable to find out why the value is undefined无法找出为什么该值未定义

【发布时间】：2021-08-19 13:18:02

【问题描述】：

所以我有一个功能，该功能旨在在单击元素标签时将其删除，并从单独的列表中删除其各自的内容/成分。一切正常，部分，在浏览器上，当我检查控制台有一个 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>

【参考方案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>