移除HTML中onclick事件至JS后功能失效问题求助

我把HTML里的onclick事件移到外部JS后，功能没法正常运行，原代码和我写的JS如下：

原HTML代码 #

<div class="shirt1" onclick="showItemDetails('shirt1')">
    <img src="shirt1.jpg" alt="shirt1">
    <h2>90s Salem Sportswear Miami Hurricanes Lightning (AOP) Tee Size XL</h2>
    <h4>Condition: Like New</h4>
    <h3>$300</h3> 
    <h5> offer</h5>
</div>

我的JavaScript代码 #

function showItemDetails(shirtId) {
    const shirt = document.getElementById(shirtId);
}

document.addEventListener('DOMContentLoaded', function() {
    const shirts = document.querySelectorAll('.shirt');
    shirts.forEach(function(shirt) {
        shirt.addEventListener('click', function() {
            const shirtId = shirt.id;
            showItemDetails(shirtId);
        });
    });
});

问题根源 #

1. 选择器不匹配：HTML里的div类是shirt1，但JS里用document.querySelectorAll('.shirt')，根本选不到目标元素，事件绑定自然无效。
2. 缺少id属性：原div没有设置id，JS里shirt.id会拿到undefined，传给showItemDetails后，document.getElementById(shirtId)找不到任何元素。

修复方案 #

1. 修改HTML

给div加上统一的classshirt和对应的id，同时移除内嵌onclick：

<div class="shirt" id="shirt1">
    <img src="shirt1.jpg" alt="shirt1">
    <h2>90s Salem Sportswear Miami Hurricanes Lightning (AOP) Tee Size XL</h2>
    <h4>Condition: Like New</h4>
    <h3>$300</h3> 
    <h5> offer</h5>
</div>

2. 修正JavaScript

如果有多个shirt元素，保持批量绑定逻辑即可，另外可以补充showItemDetails的实际功能（比如显示详情）：

function showItemDetails(shirtId) {
    const shirt = document.getElementById(shirtId);
    // 这里补充你需要实现的详情展示逻辑，比如：
    console.log('展示商品详情：', shirt);
    // 比如弹出模态框、跳转详情页等
}

document.addEventListener('DOMContentLoaded', function() {
    const shirts = document.querySelectorAll('.shirt');
    shirts.forEach(function(shirt) {
        shirt.addEventListener('click', function() {
            const shirtId = shirt.id;
            showItemDetails(shirtId);
        });
    });
});

如果只有单个元素，也可以直接通过id绑定：

document.addEventListener('DOMContentLoaded', function() {
    const shirt = document.getElementById('shirt1');
    shirt.addEventListener('click', function() {
        showItemDetails('shirt1');
    });
});

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