为何我的HTML+JavaScript代码在VS Code不生效却可在CodePen运行

以下是导致代码本地无法运行的具体原因及修复方案：

• 类名获取方法返回值错误：document.getElementsByClassName('Skill') 返回的是类数组的HTMLCollection集合，不是单个DOM元素，直接调用.classList会抛出类型错误。可以改用document.querySelector('.Skill')直接获取单个匹配元素，或者取集合的第一个元素Skill[0]调用方法。
• ID重复+默认跳转行为冲突：HTML中li标签和内部的a标签都设置了id="click"，页面中ID必须唯一，getElementById只会匹配第一个出现的元素；同时a标签默认的跳转行为会刷新页面，直接覆盖模态框显示效果。
• JS执行时机错误：CodePen默认会将JS代码放在DOM加载完成后执行，如果你本地把JS放在<head>标签内，或者放在目标DOM元素之前加载，会导致获取元素返回null，事件绑定直接失败。
• CSS属性冗余错误：.Skill选择器中重复定义了display属性，先后写了display:flex和display:none，虽然最终生效的是后者，但属于冗余代码；另外.Skill.show设置display:block会覆盖原来的flex布局，若需要保留flex布局可修改为display:flex。

修复后代码 #

HTML #

<nav class="nav-bar">
    <div class="Logocontainer">
        <h1 class="logo"><a href="#">T&S</a></h1>
    </div>
    <ul class="Menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#" id="click">My Skills</a></li>
        <li><a href="#about me">About Me</a></li>
    </ul>
</nav>
<!-- 补充模态框元素 -->
<div class="Skill">技能内容展示</div>

JavaScript #

// 等待DOM加载完成后再执行代码，也可以直接把JS放在body标签末尾
document.addEventListener('DOMContentLoaded', function() {
    const open = document.getElementById('click');
    // 改用querySelector获取单个Skill元素
    const Skill = document.querySelector('.Skill');
    open.addEventListener('click' , function(e) {
        // 阻止a标签默认跳转刷新行为
        e.preventDefault();
        Skill.classList.add('show');
    });
})

CSS #

.Skill{
    display: none;
    margin-left: 500px;
    background-color: black;
    width: 800px;
    height: 200px;
    border-radius:10px;
    color: white;
    font-weight: bold;
    align-items: center;
    justify-content: center;
}
/* 若要保留flex布局，可改为display:flex */
.Skill.show{
  display: block;
}

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