Как переключать функции CSS с функциями JS
Я хочу запустить свою функцию, которая затем начинает отображать элемент CSS, в настоящее время у меня есть
CSS
.popUpNames{
color:white;
text-shadow: 1px 1px 1px white;
padding:5px;
border:black 5px solid;
border-radius: 5px;
display:block;
position: fixed;
top: 50%;
left: 50%;
background-color: #1a1a1a;
transform: translate(-50%, -50%);
visibility: hidden;
}
.popUpNames .show {
visibility: visible;
}
HTML
<div class = "popUpNames">
<p></p>
</div>
JS
function togglePopup() {
var popup = document.getElementById("popUpNames");
popup.classList.toggle("show");
}
(функция вызывается внутри другой функции, работает вызов самой функции)
Я пытался изменить идентификатор на классы, порядок .popUpNames .show и обычный .popUpNames
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup Пытался экстраполировать с этого сайта, но безрезультатно
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы добавили пробел между .popUpNames и .show в файле CSS. Этот стиль будет применен к элементам, у которых есть .popUpNames или .show. Не и. Чтобы это исправить, уберите пробел между двумя классами, чтобы у вас было .popUpNames.show.
.popUpNames {
color: white;
text-shadow: 1px 1px 1px white;
padding: 5px;
border: black 5px solid;
border-radius: 5px;
display: none;
position: fixed;
top: 50%;
left: 50%;
background-color: #1a1a1a;
transform: translate(-50%, -50%);
}
.popUpNames.show {
display: block;
}
Я также удалил свойство visibility, потому что вы уже используете display.
Еще одна вещь (на которую указал @Mister Jojo) заключается в том, что вы получаете элемент с помощью функции getElementById, но вы даже не присвоили идентификатор своему HTML-элементу. Добавьте идентификатор в свой HTML-элемент, добавив к нему id = "<your id here>".
Пробел в селекторе называется комбинатором потомков . Отсутствие комбинатора между селекторами делает их составными селекторами.
TechStudent10 прав в том, что нужно заменить .popUpNames .show на .popUpNames.show. Вам также нужно сделать пару других вещей:
- Изменить
document.getElementById("popUpNames")наdocument.querySelector(".popUpNames") - Не забудьте вызвать
togglePopup()после загрузки DOM (иначе он останется скрытым).
document.addEventListener('DOMContentLoaded', () => {
togglePopup();
});
function togglePopup() {
const popup = document.querySelector(".popUpNames");
popup.classList.toggle("show");
}.popUpNames {
color:white;
text-shadow: 1px 1px 1px white;
padding:5px;
border:black 5px solid;
border-radius: 5px;
position: fixed;
top: 50%;
left: 50%;
background-color: #1a1a1a;
transform: translate(-50%, -50%);
display: none;
}
.popUpNames.show {
display: block;
}<div class = "popUpNames">
<p>paragraph</p>
</div>
getElementByIdкасается толькоidсобственности.