JavaScript实现将类构造器选中信息展示到HTML表格

修正后的可运行代码 #

你遇到的问题核心是没有给每个选中项单独生成表格行、选中值和实例匹配逻辑错误、局部变量作用域冲突。以下是修改后的完整JavaScript代码：

/* 新增/删除选项、查看选项和价格汇总 */
// 变量声明
let button = document.getElementById("submit");
let choice = document.getElementById("choice");
let totalPriceEl = document.getElementById("totalPrice");

// 配置项构造类
class CarOptions {
    constructor(optionName, price) {
        this.optionName = optionName;
        this.price = price;
    }
}
// 生成6个配置实例
let option = new CarOptions("", 0);
let vac = new CarOptions("vac", 150);
let trunk = new CarOptions("trunk", 2000);
let seat = new CarOptions("seat", 550);
let night = new CarOptions("night", 360);
let wifi = new CarOptions("wifi", 1200);
let park = new CarOptions("park", 600);
// 所有配置实例集合
let allOptions = [option, vac, trunk, seat, night, wifi, park];

// 提交事件监听
button.addEventListener("click", (e) => {
    e.preventDefault();
    // 清空之前的选中记录，仅保留表头和总计行
    document.querySelectorAll('.results tr:not(:first-child):not(:last-child)').forEach(row => row.remove());
    let total = 0;
    // 获取选中的配置值，过滤掉空选项
    const selectedValues = Array.from(document.querySelectorAll('#choice option:checked'))
        .map(el => el.value)
        .filter(val => val !== '');
    // 遍历选中值，匹配对应实例并渲染
    selectedValues.forEach(val => {
        const matchedOption = allOptions.find(opt => opt.optionName === val);
        if(matchedOption) {
            display(matchedOption);
            total += matchedOption.price;
        }
    })
    // 填充总价
    totalPriceEl.innerText = total;
})

function display(optionObj) {
    // 为每个选中配置生成独立的表格行
    const newRow = document.createElement('tr');
    const nameCell = document.createElement('td');
    const priceCell = document.createElement('td');
    nameCell.innerText = optionObj.optionName;
    priceCell.innerText = optionObj.price;
    newRow.appendChild(nameCell);
    newRow.appendChild(priceCell);
    // 插入到总计行之前
    document.querySelector('.results').insertBefore(newRow, totalPriceEl.parentNode);
}

修改说明 #

• 删除了冗余的allOptionsName数组，直接通过实例数组匹配选中值，避免数据维护不一致
• 每次提交先清空历史渲染的选项行，避免重复展示
• 每个选中配置单独生成表格行，不会全部挤在同一行
• 修复了原代码中局部变量作用域错误、display函数参数传递失效的问题
• 完全通过类实例的属性填充表格，符合你不直接使用表单原始值的要求
• 新增了总价自动计算逻辑，自动累加所有选中配置的价格

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