为什么我的html(Javascript)代码在vsCode中不起作用？

Question

这是一个简单的代码，帮助HTML执行打开一个box-modal的代码。但无论出于什么原因，它似乎没有做任何事情，而我写在Vscode，但它工作得很好，而我写在'code-pen'。请告诉我为什么我的javascript不工作?

//javascript
const open = document.getElementById('click');
const Skill = document.getElementsByClassName('Skill');
open.addEventListener('click' , function() {
Skill.classList.add('show');
});

//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 id="click"><a href="#" id="click">My Skills</a></li>
<li><a href="#about me">About Me</a></li>
</ul>
</nav>
});

//css
.Skill{
display: flex;
margin-left: 500px;
background-color: black;
width: 800px;
height: 200px;
border-radius:10px;
color: white;
font-weight: bold;
align-items: center;
justify-content: center;
display: none;
}
.Skill.show{
display:block;
}

Answer 1

getElementsByClassName检索一个列表，正如您可以看到的名称:"elements"复数。

改变

const Skill = document.getElementsByClassName('Skill')

const Skill = document.getElementsByClassName('Skill')[0];

，以便访问类"skill"的第一个元素。