-2

this is a simple code that helps HTML to execute a code that will open a box-modal. But for whatever reason, it doesn't seem to do anything while I write it in Vscode but it works perfectly fine while I write it in 'code-pen'. pls, tell meWhy my javascript is not working like that?

//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;
    }
SAM
  • 5
  • 1
  • 2
    What do you expect us to do to help you here? We don't know what your html or css looks like... Are you getting any errors? Is the class being applied in the html? We need an [mcve] to help you. – Cerbrus Oct 25 '21 at 07:59
  • Does this answer your question? [How to get element by class name?](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) – PatricNox Oct 25 '21 at 08:02

1 Answers1

-1

getElementsByClassName retrieves a list, as you can see per the name: "elements". Plural.

change

const Skill = document.getElementsByClassName('Skill')

to

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

in order to access the first element with class "skill".

PatricNox
  • 3,306
  • 1
  • 17
  • 25
  • If that's the problem, this is a duplicate of, for example, [this question](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) – Cerbrus Oct 25 '21 at 08:00
  • The class 'skill' is not set as an array it's a list for my 'nav' bar – SAM Oct 25 '21 at 08:05
  • getElementsByClassName returns a list of all elements found with the class "skill" @SAM – PatricNox Oct 25 '21 at 08:06