Почему не работает эта функция onmouseover? - «Невозможно прочитать свойство 'display' of undefined»

Итак, я просто начал делать эту страницу, чтобы попрактиковаться, когда я столкнулся с этой ошибкой, что div .s1episodes должен появиться с командой onmouseover, при наведении курсора на div .season1, но это не так, хотя я делал это раньше несколько раз и это всегда работало.

Как видите, сообщение об ошибке: "Невозможно прочесть свойство 'display' из undefined", " Я еще новичок, поэтому я не совсем понимаю значение этого

Я видел другие вопросы с этим сообщением об ошибке, но, к сожалению, они мне не помогли.

Почему на этот раз не работает? Спасибо вам за помощь!

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>

javascript html css

27.04.2018 11:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Измените свой код, чтобы использовать [0] как

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

Это потому, что getElementsByClassName дает вам список элементов с этим именем класса.

27.04.2018 11:30

Метод getElementsByClassName возвращает набор элементов в виде массива, вы должны выбрать первый элемент, а затем вызвать display:

S1[0].style.display = (S1.style.display === 'block' ? 'none' : 'block');

«вернуть массив объектов» - это не массив.

— 27.04.2018 11:31

Да. -like очень важен. Это все равно не сработает: S1.style.display - S1 по-прежнему является списком узлов.

— 27.04.2018 11:33

Да, обновил свой пост, добавив like, спасибо.

— 27.04.2018 11:34

27.04.2018 11:30

Другие вопросы по теме

Получение сохраненного javascript из браузера и преобразование в php

HTML - проверьте, поместится ли контент в div фиксированного размера

Автоматическое изменение высоты стрелки в соответствии с высотой содержимого (слайдер Liquid)

.empty () не выполняется под $ ('# xxxx'). click (xxx, но отлично работает, вызывается из прямой функции js

V-подсказка появляется за пределами экрана на мобильном устройстве

Datatable - поиск нескольких значений со специальными символами

Bootstrap 4.1: проверка ввода формы с помощью пользовательского JavaScript

Включите кнопку «Отправить», только если значение изменилось

Как отображать div горизонтально в строке в html?

Читать символ при выборе мыши

Почему не работает эта функция onmouseover? - «Невозможно прочитать свойство 'display' of undefined»

Ответы 2

Другие вопросы по теме

Похожие вопросы