JS中创建的元素上的textContent不起作用？

Posted 2023-01-05

我正在处理学校任务，但最近遇到了textContent问题。我导入一个JSON文件，并将数据用作foreach。 .js文件中没有错误，但是我收到一个typeError：即使我使用JSON文件中的元素定义了属性，也无法将属性'textContent'设置为undefined？

[当我删除textContent的两行时，我收到一个类似appendChild属性的错误：无法读取null的属性'appendChild'。

如果我在forEach中记录coffee.name，我会得到正确的名字。我猜我只有一个名字，因为由于错误不断，forEach无法再循环。

我的js代码：

    import './style.css';
    import data from './assets/data/coffees.json';

  const init = () => 
 console.log(data);
 createPriceList(data);
;

const createPriceList = coffees => 
const ul = document.querySelector('prices__list');
console.log(coffees);

coffees.coffees.forEach(coffee => 
 if (coffee.plantbased === true) 
  const price = document.createElement('li');
  price.classList.add('price');
  const a = document.createElement('a').classList.add('price__button');
  const spanWrapper = document.createElement('span').classList.add('price__button__wrapper');
  const spanName = document.createElement('span').classList.add('price__button__name');
  const spanAmount = document.createElement('span').classList.add('price__button__amount');
  const spanPlus = document.createElement('span').classList.add('price__button__plus');

  spanName.textContent = coffee.name;
  spanAmount.textContent = coffee.prices.medium;

  ul.appendChild(price);
  price.appendChild(a);
  a.appendChild(spanWrapper);
  spanWrapper.appendChild(spanName);
  spanWrapper.appendChild(spanAmount);
  a.appendChild(spanPlus);
  
  );
 ;

init();

答案

您正在尝试像这样将方法链接在一起：

document.createElement('span').classList.add('price__button__name');

但是，您必须先创建元素，然后才能使用其classList：

const spanName = document.createElement('span');
spanName.classList.add('price__button__name');