从API获取商品详情报错：Cannot set properties of undefined问题排查

错误核心原因 #

你遇到的报错根源是：setAttribute()方法返回值为undefined，而非创建好的DOM元素。你在代码中使用了链式调用写法：

const div_class_card = document.createElement('div').setAttribute('class', 'card')

这会导致div_class_card变量存储的是undefined，而非预期的<div class="card">元素。后续尝试给undefined设置innerText，自然会抛出Cannot set properties of undefined错误。所有用这种链式写法创建的元素变量（p_class_title、img等）全都是undefined，这是问题的关键。

另外还有一个细节错误：你用document.createElement('div')创建图片容器，但CSS中定义的是div#cards_inner div.card img样式，应该创建<img>元素，并且通过src属性设置图片地址，而非用innerText存储链接。

修正后的JavaScript代码 #

async function fakeStoreAPI_Products () {
    const urlOfData = await fetch('https://fakestoreapi.com/products');
    if(urlOfData.status !== 200 || !urlOfData.ok){
        throw new Error('There was a problem fetching the data...')
    }else if(urlOfData.status === 200 && urlOfData.ok){
        const response = await urlOfData.json();
        populate(response)
    }
}

function populate (completeData) {
    const displayAllCardsHere = document.getElementById('cards_inner');    
    const data = completeData;
    
    for(const datum of data){
        // 拆分元素创建与属性设置，避免链式调用导致变量为undefined
        const div_class_card = document.createElement('div');
        div_class_card.setAttribute('class', 'card');
        
        const p_class_title = document.createElement('p');
        p_class_title.setAttribute('class', 'title');
        
        // 创建img元素而非div，匹配CSS样式
        const img = document.createElement('img');
        img.setAttribute('class', 'img');
        
        const p_class_description = document.createElement('p');
        p_class_description.setAttribute('class', 'description');
        
        const div_class_cat_price = document.createElement('div');
        div_class_cat_price.setAttribute('class', 'cat_price');
        
        const p_class_category = document.createElement('p');
        p_class_category.setAttribute('class', 'category');
        
        const p_class_price = document.createElement('p');
        p_class_price.setAttribute('class', 'price');
        
        // 赋值内容
        p_class_title.innerText = datum['title'];
        img.src = datum['image']; // img用src属性加载图片
        p_class_description.innerText = datum['description'];
        p_class_category.innerText = datum['category'];
        p_class_price.innerText = `$${datum['price']}`; // 增加货币符号提升可读性
        
        // 组装DOM结构
        div_class_card.append(p_class_title);
        div_class_card.append(img);
        div_class_card.append(p_class_description);
        div_class_card.append(div_class_cat_price);
        
        div_class_cat_price.append(p_class_category);
        div_class_cat_price.append(p_class_price);
        
        displayAllCardsHere.append(div_class_card);
    }
}

fakeStoreAPI_Products().catch((err) => {
    console.log(err)
})

关键注意事项 #

• 所有DOM元素的创建和属性设置必须分开执行，不能链式调用createElement().setAttribute()，因为setAttribute不会返回元素本身。
• 图片元素必须使用<img>标签，通过src属性加载图片资源，而非用div的文本内容存储图片链接。

内容的提问来源于stack exchange，提问作者Matrion