Uncaught TypeError: невозможно установить свойства неопределенного (настройка «отображение»)

Я делаю индикатор выполнения для своего музыкального приложения. Я хочу, чтобы индикатор прогресса отображался всякий раз, когда пользователь наводит курсор на контейнер индикатора выполнения. Но я сталкиваюсь с этой ошибкой: Uncaught TypeError: невозможно установить свойства неопределенного (настройка «отображение»)

Мой Javascript:

document.getElementsByClassName('rhap_progress-container')[0].onmouseover = function(){
  document.getElementsByClassName('rhap_progress-indicator').style.display = "block";
}
document.getElementsByClassName('rhap_progress-container')[0].onmouseout = function(){
  document.getElementsByClassName('rhap_progress-indicator').style.display = "none";
}

Мой HTML:

<div class="rhap_progress-container" aria-label="Audio progress control" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="24.67" tabindex="0">
  <div class="rhap_progress-bar ">
    <div class="rhap_progress-indicator" style="left: 24.67%;"></div>
    <div class="rhap_progress-filled" style="width: 24.67%;"></div>
  </div>
</div>

Мой CSS:

.rhap_progress-indicator {
  display: none;
  width: 18px !important;
  height: 18px !important;
  border: 3px solid #232530;
  top: -7 px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  content: url('./img/outlined-progress-indicator.png');
}

Обратите внимание, когда вы объявляете обработчик событий, вы понимаете, что это массив, и, таким образом, добавляете [0], но вы не делаете этого в самом обработчике событий.

mardubbles 09.04.2022 13:10

Вы пропустили индекс вместе с «getElementsByClassName» внутри функционального блока. В качестве альтернативы вы можете добавить идентификатор и перейти к «getElementById» document.getElementsByClassName('rhap_progress-indicator')[0‌​].style.display = "block";

ullas kakanadan 09.04.2022 13:42
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
2
41
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

document.getElementsByClassName возвращает массив.

Итак, document.getElementsByClassName('rhap_progress-indicator') необходимо также выбрать индекс массива:

document.getElementsByClassName('rhap_progress-indicator')[0].

Альтернативой является использование document.querySelector('.rhap_progress-indicator'), которое возвращает элемент, если он существует.

появилась еще одна ошибка: Playing.js: 64 Uncaught TypeError: невозможно установить свойства null (настройка «onmouseover»)

ChimmFX 09.04.2022 13:28
Ответ принят как подходящий

вам нужно выбрать индекс списка узлов при использовании getElementsByClassName

это сработает для вас:


let Container = document.getElementsByClassName('rhap_progress-container');
let Indicator = document.getElementsByClassName('rhap_progress-indicator');

Container[0].onmouseover = function(){
  Indicator[0].style.display = "block";
}
Container[0].onmouseout = function(){
  Indicator[0].style.display = "none";
}

Еще одна проблема здесь: Playing.js: 78 Uncaught TypeError: невозможно прочитать свойства неопределенного (чтение «стиля»)

ChimmFX 09.04.2022 13:32

@ChimmFX Я редактировал код, проверьте этот.

Milad 09.04.2022 13:38

Эй, я не знаю, как, но это работает, пока я не обновлю страницу, и страница не будет очищена (я использую reactjs для ее сборки, поэтому это означает, что она не скомпилировалась). Вот сообщение об ошибке в журнале консоли: Playing.js: 66 Uncaught TypeError: невозможно установить свойства неопределенного (настройка «onmouseover»)

ChimmFX 09.04.2022 13:48

@ChimmFX, вы не определили ни один из rhap_progress-container или rhap_progress-indicator в своем html-теле

Milad 09.04.2022 13:50

Я использовал React, поэтому html автоматически записывается реагирующим приложением, а не мной, я только добавляю к нему больше функций.

ChimmFX 09.04.2022 13:51

@ChimmFX, так что поместите этот код в window.onload = function() { // code }

Milad 09.04.2022 13:53

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