1

I just started to make this page, to practice, when I ran into this error, that the .s1episodes div should appear with the onmouseover command, hovering the .season1 div, but it doesn't, although I've done this before multiple times and it has always worked.

As you can see, the error message is: "Cannot read property 'display' of undefined". I'm a beginner still, so I'm not really aware of the meaning of this.

I've seen other questions with this error message, but they didn't help me unfortunately.

Why is this not working this time?

function showseason1() {
  var S1 = document.getElementsByClassName("s1episodes");
  S1.style.display = (S1.style.display === 'block' ? 'none' : 'block');
}
/*   #   */

body {
  background-color: #38ADAE;
  color: #CD295A;
  max-width: 1900px;
  max-height: 1500px;
}

.menu {
  position: fixed;
  position: absolute;
  left: 13%;
  width: 70%;
  height: 35%;
  background-color: #9B2027;
  color: #CC4E13;
}

#logo {
  height: 100%;
}

.about {
  top: 0%;
  width: 10%;
  height: 99%;
  position: absolute;
  left: 5%;
}

.cast {
  top: 0%;
  width: 10%;
  height: 99%;
  position: absolute;
  left: 20.1%;
}

.season1 {
  z-index: 2;
  top: 0%;
  width: 10%;
  height: 99%;
  position: absolute;
  left: 35.2%;
}

.season2 {
  top: 0%;
  width: 10%;
  height: 99%;
  position: absolute;
  left: 45.3%;
}

.season3 {
  top: 0%;
  width: 10%;
  height: 99%;
  position: absolute;
  left: 55.4%;
}

.season4 {
  top: 0%;
  width: 10%;
  height: 99%;
  position: absolute;
  left: 65.5%;
}

#season1,
#season2,
#season3,
#season4 {
  margin-left: -13px;
}

.titles {
  font-weight: bold;
  font-size: 25px;
  position: absolute;
  top: 37%;
  left: 25%;
}

.s1episodes {
  text-align: center;
  border-radius: 15px;
  display: none;
  position: absolute;
  width: 70%;
  height: 350%;
  border: 3px solid red;
  bottom: -360%;
  left: 3%;
}

h2 {
  text-align: center;
}

button {
  font-size: 19px;
  border: none;
  background-color: transparent;
  color: #291A14;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="TFS.css" />
  <script src="TFS.js"></script>
</head>

<body>
  <div class="menu">
    <img id="logo" src="logo.jpg" />

    <div class="about">
      <span class="titles">About</span>
    </div>
    <div class="cast">
      <span class="titles">Cast</span>
    </div>
    <div class="season1" onmouseover="showseason1()">
      <span id="season1" class="titles">S1</span>

    </div>
    <div class="s1episodes">
      <h2>Episode List</h2>
      <button>Episode 1</button>

    </div>



    <div class="season2">
      <span id="season2" class="titles">S2</span>
    </div>
    <div class="season3">
      <span id="season3" class="titles">S3</span>
    </div>
    <div class="season4">
      <span id="season4" class="titles">S4</span>
    </div>



  </div>
</body>

</html>
halfer
  • 19,824
  • 17
  • 99
  • 186
K. P.
  • 540
  • 5
  • 17

2 Answers2

2

Change your code to use [0] as 

function showseason1(){
    var S1=document.getElementsByClassName("s1episodes")[0];
    S1.style.display = (S1.style.display === 'block' ? 'none' : 'block');
}

This is because getElementsByClassName gives you the list of elements with that class name.

Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
0

The getElementsByClassName method returns an array-like collection of elements, you should pick the first element then call display :

S1[0].style.display = (S1.style.display === 'block' ? 'none' : 'block');
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101