Чтобы отобразить изображение, нужно дважды щелкнуть по кнопке?
Предполагается, что кнопка в этом скрипте может заставлять изображение появляться и исчезать.
Код работает нормально, после первого раза изображение появляется. Я хочу, чтобы изображение сначала было скрыто, и когда кнопка нажата, я хочу, чтобы она делала ее видимой, но сначала нужно дважды щелкнуть кнопку, а затем она правильно работает. Это раздражает, как исправить?
Код объявления:
.
(Это просто я знаю, я начал вчера)
<!DOCTYPE html>
<html>
<meta charset= "utf-8">
<head>
<title>cat</title>
<style>
#flyingcat {
visibility: hidden;
}
</style>
</head>
<body>
<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
<div id = "flyingcat">
<img src = "http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
<p>hey</p>
</div>
</body>
<script>
function show() {
var x = document.getElementById("flyingcat");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Стили, установленные с помощью CSS, не отображаются в JavaScript. Вам нужно сначала назначить стиль с помощью JS, а затем вызвать свою функцию, чтобы переключить видимость.
Вот рабочая демонстрация:
var style = document.getElementById("flyingcat").style;
style.visibility = 'hidden';
function show() {
style.visibility = style.visibility === 'hidden' ? 'visible' : 'hidden';
}<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
<div id = "flyingcat">
<img src = "http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
<p>hey</p>
</div>Альтернативный способ - использовать getComputedStyle(), а затем получить значение свойства с помощью getPropertyValue(). Таким образом, ваш код не нужно сильно менять.
function show() {
var x = document.getElementById("flyingcat");
var styles = getComputedStyle(x, null);
if (styles.getPropertyValue('visibility') === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}#flyingcat {
visibility: hidden;
}<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
<div id = "flyingcat">
<img src = "http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
<p>hey</p>
</div>попробуй это:
Это если вы запустили изображение скрытым.
Они так, как вы кодируете прямо сейчас, предполагаете, что исходное состояние изображения является видимым.
Потому что, когда JavaScript в первый раз считывает видимость изображения, он имеет значение null;
Причина такая же, как в этом столбик:
Reverse your if and else tests. JavaScript can't read CSS propertiesfrom style unless it explicitly sets them
function show() {
var x = document.getElementById("flyingcat");
if (x.style.visibility == "visible") {
x.style.visibility = "hidden";
} else {
x.style.visibility = "visible";
}
}#flyingcat {
visibility: hidden;
}<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
<div id = "flyingcat">
<img src = "http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
<p>hey</p>
</div>Чтобы сделать изображение скрытым по умолчанию и переключать скрытие / отображение при двойном щелчке кнопки, используйте следующий код в тегах скрипта.
<script>
document.getElementById("flyingcat").style.visibility = 'hidden';
function show() {
var x = document.getElementById("flyingcat");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
А также запустите функцию show () при двойном щелчке кнопки, изменив
<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
к
<button ondblclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
Свойство visibility устанавливается пустой строкой, вы можете записать его в строку, все будет работать правильно!
<!DOCTYPE html>
<html>
<meta charset= "utf-8">
<head>
<title>cat</title>
</head>
<body>
<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
<div id = "flyingcat" style = "visibility: hidden;">
<img src = "http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
<p>hey</p>
</div>
<script>
function show() {
var x = document.getElementById("flyingcat");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</body>
</html>x.style.visibility - это пустая строка по умолчанию. Я изменил порядок вашего оператора if, чтобы отображать изображение onclick, если оно не отображается в данный момент.
<!DOCTYPE html>
<html>
<meta charset= "utf-8">
<head>
<title>cat</title>
<style>
#flyingcat {
visibility: hidden;
}
</style>
</head>
<body>
<button onclick = "show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
<div id = "flyingcat">
<img src = "http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
<p>hey</p>
</div>
</body>
<script>
function show() {
var x = document.getElementById("flyingcat");
console.info([x.style.visibility])
if (x.style.visibility === "visible") {
x.style.visibility = "hidden";
} else {
x.style.visibility = "visible";
}
}
</script>
</html>Если вы обращаетесь к элементу DOM через JS (используя, например, getElementById), вы не сможете прочитать вычисленный стиль этого элемента, потому что он определен внутри файла CSS. Чтобы этого избежать, необходимо использовать свойство getComputedStyle (или currentStyle для IE).
Вы можете просто добавить прослушиватель событий в свой контейнер изображений. Не нужно добавлять CSS и передавать функцию из вашего div. Это то, что вы можете сделать в вашем теге скрипта ... Таким образом, ваш JavaScript управляет шаблоном, а не смесью вещей.
// for getting the button
let button = document.querySelector('button');
// hiding the image div at first
document.getElementById('flyingcat').style.display = 'none';
// event listner on click
button.addEventListener('click', () => {
// getting the image
const image = document.getElementById('flyingcat');
// toggle image display
if (image.style.display === 'none') { // if the diplay is none
image.style.display = 'block'; // making the image block
} else image.style.display = 'none'; // else hiding the image again
});
Я прокомментировал строки, чтобы вы знали, что в какой момент делается ...
Я вижу, вы использовали видимость: скрыто. Позвольте мне сказать вам, что при использовании этого элемент будет там, но его видимость будет отсутствовать, что означает, что он всегда будет покрывать пространство. Но используя свойство display: none, мы можем удалить весь элемент с экрана.
x.style.visibilityвозвращает значение, определенное в атрибутеstylex. Поскольку его нет, при первом нажатии кнопкиx.style.visibility === "hidden"будетfalse.