如何编程在HTML页面中展示汽车对象、关联图片及showMore()方法

API 探路者

2026-8-30

问题修复

你现有代码有几处明显错误，无法达到预期效果：

构造函数调用写错：newcarDescription 漏了空格，正确语法是 new carDescription()
第一台保时捷的对象是直接用字面量写的，没有挂载要求的showMore()方法，图片地址还多写了多余的src=前缀
构造函数本身没定义showMore()方法，所有后续创建的实例都不带这个方法
print()函数只处理了单个car对象，既没遍历所有车辆，也没渲染图片、绑定交互，直接把对象塞到HTML里只会显示[object Object]
脚本最开头就获取show节点，此时DOM还没加载完成，拿到的是null，后续操作会报错

修复后完整代码

cars.js 文件代码

// 汽车构造函数，统一给所有实例挂载showMore方法
function carDescription(make, model, colour, image, registrationnumber, price ) {
    this.make = make;
    this.model = model;
    this.colour = colour;
    this.image = image;
    this.registrationnumber = registrationnumber;
    this.price = price;
    this.showMore = function() {
        const detail = `
品牌：${this.make}
车型：${this.model}
颜色：${this.colour}
车牌号：${this.registrationnumber}
售价：${this.price} 元
        `;
        alert(detail);
    }
};

// 统一用构造函数创建所有汽车实例，修正语法错误、错误图片地址
const carList = [
    new carDescription(
        "Porsche", "GT3", "Black", 
        "https://pictures.topspeed.com/IMG/crop_webp/201210/1200hp-porsche-911-g_1920x1080.webp", 
        "LMO 909 GP", 1000000
    ),
    new carDescription(
        "Ford", "Fiesta", "Red",
        "https://i.ytimg.com/vi/abVgt23rmrA/hqdefault.jpg", 
        "MNO 010 EC",  100000
    ),
    new carDescription(
        "Opel", "Corsa", "White",
        "https://img.gumtree.co.za/api/v1/za-pt10-ads/images/a1/a15f67b3-c11c-40b6-85ad-2987e84e956b?rule=s-I3.auto", 
        "KLJ 899 GP",  55000
    ),
    new carDescription(
        "Mazda", "CX-5", "Black",
        "https://i.pinimg.com/originals/54/d2/0b/54d20b0bee90aaef22a68b5628441832.jpg" ,
        "TYH 890 GP",  210000
    ),
    new carDescription(
        "Toyota", "Hilux", "Gold",
        "https://imganuncios.mitula.net/medium/toyota_hilux_toyota_hilux_1050104654262066309.jpg" ,
        "HSG 573 EC",  250000
    )
];

function print() {
    const showContainer = document.getElementById('show');
    // 遍历所有车辆生成展示卡片
    carList.forEach(car => {
        const carCard = document.createElement('div');
        carCard.style.cssText = 'border:1px solid #eee; border-radius:8px; padding:16px;';
        carCard.innerHTML = `
            <h3>${car.make} ${car.model}</h3>
            <p>颜色：${car.colour}</p>
            <p>售价：${car.price}</p>
            <img src="${car.image}" alt="${car.make} ${car.model}" style="width:100%; border-radius:4px; margin:8px 0;">
            <button style="padding:8px 16px; cursor:pointer;">查看更多详情</button>
        `;
        // 绑定按钮点击事件，调用对应实例的showMore方法
        carCard.querySelector('button').addEventListener('click', () => {
            car.showMore();
        });
        showContainer.appendChild(carCard);
    })
}

HTML 文件代码

<!DOCTYPE html>
<html onload="print()"  lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cars</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: system-ui, -apple-system, sans-serif;
        }
        #show {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 20px;
        }
    </style>
</head>
<body >
    <div id="show"></div>
    <script src="cars.js"></script>
</body>
</html>

实现效果

页面加载后自动以卡片形式展示所有汽车的基础信息、关联图片
每个卡片上的按钮绑定对应汽车实例的showMore()方法，点击后弹出对话框展示该车辆全部详情
所有汽车实例都符合要求自带showMore()方法，修复了原代码全部语法、逻辑错误

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

如何编程在HTML页面中展示汽车对象、关联图片及showMore()方法

cars.js 文件代码 #

HTML 文件代码 #

cars.js 文件代码

HTML 文件代码