如何使用JavaScript动态创建HTML <dialog>元素展示汽车隐藏信息

代码问题排查 #

• showMore()方法仅完成了dialog相关元素的创建，没有将元素挂载到页面DOM中，也没有调用原生<dialog>组件的showModal()方法触发弹窗显示，所以点击按钮无响应
• 弹窗信息字段缺失要求的价格属性，且各字段之间没有分隔符，内容会拼接在一起无法正常阅读
• 创建的购买按钮未绑定交互逻辑，也没有添加到dialog容器内

修复后完整代码 #

JS代码 #

// 汽车构造函数
function Car(brand,model,colour,regNumber, carsPicture,price){
    this.brand = brand;
    this.model = model;
    this.colour = colour;
    this.regNumber = regNumber;
    this.imageSrc = carsPicture;
    this.price = price;
    this.showMore = function(){
        // 先移除已存在的弹窗，避免重复生成
        const oldDialog = document.querySelector(".dialog-box");
        if(oldDialog) oldDialog.remove();

        let dialog = document.createElement("dialog");
        dialog.classList.add("dialog-box");
        // 内置基础弹窗样式，可自行通过CSS类覆盖
        dialog.style.padding = "20px";
        dialog.style.border = "none";
        dialog.style.borderRadius = "8px";
        dialog.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
        dialog.style.width = "300px";

        let paragraph = document.createElement("p");
        paragraph.classList.add("showMore-info");
        paragraph.style.lineHeight = "2";
        paragraph.innerHTML =  
        `品牌：${this.brand}<br>
        型号：${this.model}<br>
        颜色：${this.colour}<br>
        注册号：${this.regNumber}<br>
        售价：${this.price}`;

        let btnWrap = document.createElement("div");
        btnWrap.style.display = "flex";
        btnWrap.style.gap = "12px";
        btnWrap.style.justifyContent = "flex-end";
        btnWrap.style.marginTop = "20px";

        let perchase = document.createElement("button");
        perchase.innerHTML= "购买";
        perchase.style.padding = "6px 14px";
        perchase.addEventListener("click", () => {
            alert(`已提交${this.brand}${this.model}的购买申请`);
            dialog.close();
            dialog.remove();
        });

        let closeBtn = document.createElement("button");
        closeBtn.innerHTML= "关闭";
        closeBtn.style.padding = "6px 14px";
        closeBtn.addEventListener("click", () => {
            dialog.close();
            dialog.remove();
        });

        btnWrap.appendChild(perchase);
        btnWrap.appendChild(closeBtn);
        dialog.appendChild(paragraph);
        dialog.appendChild(btnWrap);
        // 将弹窗挂载到页面
        document.body.appendChild(dialog);
        // 触发弹窗显示
        dialog.showModal();
    };
};
let car1 = new Car(
    "梅赛德斯",
    "AMG",
    "金属色",
    "CA227788",
    "https://images.pexels.com/photos/112460/pexels-photo-112460.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "120000兰特"
);
let car2 = new Car(
    "吉普",
    "切诺基SUV",
    "白色",
    "234 567 GP",
    "https://images.pexels.com/photos/119435/pexels-photo-119435.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "200000兰特"
);
let car3 = new Car(
    "奥迪",
    "轿跑",
    "黄色",
    "123456 KZN",
    "https://images.pexels.com/photos/1149831/pexels-photo-1149831.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "154897兰特"
);
let car4 = new Car(
    "宝马",
    "4系轿跑",
    "蓝色",
    "246810 EC",
    "https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
     "200000兰特"
);
let car5 = new Car(
    "庞蒂亚克",
    "轿车",
    "黄色",
    "321 Ready WP",
    "https://images.pexels.com/photos/4502385/pexels-photo-4502385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "300000兰特"
);
let theCars = [car1,car2,car3,car4,car5];
let carSales = {};
carSales.addCars = function(){
    const container = document.querySelector(".featured-cars");
    // 给容器加基础布局样式，可自行调整
    container.style.display = "grid";
    container.style.gridTemplateColumns = "repeat(auto-fill, minmax(250px, 1fr))";
    container.style.gap = "20px";
    container.style.padding = "20px";

    theCars.forEach(function (car4sale){
        const carCard = document.createElement("div");
        carCard.style.position = "relative";
        carCard.style.overflow = "hidden";
        carCard.style.borderRadius = "8px";

        let carImg = document.createElement("img");
        carImg.classList.add("carImages");
        carImg.src = car4sale.imageSrc;
        carImg.alt = car4sale.colour+ " " + car4sale.brand;
        carImg.style.width = "100%";
        carImg.style.height = "180px";
        carImg.style.objectFit = "cover";

        let btnShowmore = document.createElement("button");
        btnShowmore.classList.add("viewMoreBtn");
        btnShowmore.innerHTML = "查看详情";
        btnShowmore.style.padding = "6px 12px";
        btnShowmore.style.cursor = "pointer";
        btnShowmore.addEventListener("click", function() {
            car4sale.showMore();
        });
        
        let carPrice = document.createElement("h2");
        carPrice.classList.add("carPrice");
        carPrice.innerHTML = car4sale.price;
        carPrice.style.margin = "0 0 8px 0";
        carPrice.style.color = "#d92121";
        carPrice.style.fontSize = "20px";

        let carColorAndBrnad = document.createElement("h3");
        carColorAndBrnad.classList.add("color-and-brand");
        carColorAndBrnad.innerHTML = car4sale.colour+ " " +car4sale.brand;
        carColorAndBrnad.style.margin = "0 0 12px 0";
        carColorAndBrnad.style.fontSize = "16px";
        carColorAndBrnad.style.fontWeight = "normal";

        let carinfo = document.createElement("div");
        carinfo.classList.add("carInfo");
        carinfo.classList.add("overlay");
        carinfo.style.padding = "12px";
        carinfo.style.background = "#fff";
        carinfo.appendChild(carPrice);
        carinfo.appendChild(carColorAndBrnad);
        carinfo.appendChild(btnShowmore);

        carCard.appendChild(carImg);
        carCard.appendChild(carinfo);
        container.appendChild(carCard);
    });
};
carSales.addCars();

HTML代码 #

<div class="featured-cars"></div>

补充说明 #

如果需要调整界面样式，可以直接给对应CSS类写自定义规则，覆盖代码内的行内样式即可。

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