[英]textContent on created element in JS not working?
I'm working on a school task, but I recently got stuck with a textContent issue.我正在处理学校任务,但最近遇到了 textContent 问题。 I import a JSON file and use the data as a foreach.
我导入 JSON 文件并将数据用作 foreach。 There are no errors in the.js file, but i receive a typeError: cannot set property 'textContent' of undefined, even though i defined the properties with elements from the JSON file?
.js 文件中没有错误,但我收到 typeError: cannot set property 'textContent' of undefined,即使我使用 JSON 文件中的元素定义了属性?
When I remove the two lines with textContent, I receive a similar error with the appendChild property: cannot read property 'appendChild' of null.当我使用 textContent 删除两行时,我收到与 appendChild 属性类似的错误:无法读取 null 的属性“appendChild”。
If i log coffee.name in my forEach, I do get the correct first name.如果我在我的 forEach 中记录 coffee.name,我会得到正确的名字。 I'm guessing i only get one name since the forEach can't loop further because of the errors further along.
我猜我只有一个名字,因为 forEach 不能进一步循环,因为错误更远。
My js code:我的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();
Here is the HTML I'm trying to create (the section in comment, the rest is defined):这是我正在尝试创建的 HTML (评论中的部分,定义了 rest):
<section class="prices highlight spaced">
<h2 class="visually-hidden">Price list</h2>
<ul class="prices__list">
<!--<li class="price">
<a class="price__button">
<span class="price__button__wrapper">
<span class="price__button__name">Oat Latte</span>
<span class="price__button__amount">€ 2</span>
</span>
<span class="price__button__plus">+</span>
</a>
</li> -->
</ul>
</section>
You are trying to chain methods together like this:您正在尝试将方法链接在一起,如下所示:
const test = document.createElement('span').classList.add('price__button__name'); console.log(test.classList);
But, you have to create the element first and then you can work with its classList
or other properties:但是,您必须先创建元素,然后才能使用其
classList
或其他属性:
const test = document.createElement('span'); test.classList.add('price__button__name'); console.log(test.classList);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.