Кнопка нуждается в двойном щелчке, чтобы показать изображение? - PullRequest
Новая
       1

Кнопка нуждается в двойном щелчке, чтобы показать изображение?

0 голосов
/ 05 мая 2018

Предполагается, что кнопка в этом скрипте способна заставить изображение появляться и исчезать. Код работает нормально, после первого раза изображение появляется. Сначала я хочу, чтобы изображение было скрыто, а когда кнопка нажата, я хочу, чтобы она была видимой, но сначала нужно дважды щелкнуть кнопку, а затем она работает правильно. Это раздражает, как я могу это исправить?
Код:
(Это просто, я знаю, я начал вчера) 

<!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>

Ответы [ 7 ]

0 голосов
/ 05 мая 2018

Если вы получите доступ к элементу DOM через JS (используя, например, getElementById), вы не сможете прочитать вычисленный стиль этого элемента, поскольку он определен в файле CSS. Чтобы избежать этого, вы должны использовать свойство getComputedStyle (или currentStyle для IE).

Пожалуйста, проверьте этот ответ

0 голосов
/ 05 мая 2018

Вы можете просто добавить прослушиватель событий в свой контейнер изображений. Не нужно добавлять 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, мы можем удалить весь элемент с экрана.

0 голосов
/ 05 мая 2018

x.style.visibility - пустая строка по умолчанию. Я изменил порядок вашего оператора if, чтобы показывать изображение по клику, если оно не отображается в данный момент. 

<!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.log([x.style.visibility])
        if (x.style.visibility === "visible") {
            x.style.visibility = "hidden";
        } else {
            x.style.visibility = "visible";
        }
    }
    
    </script>
    
    </html>
0 голосов
/ 05 мая 2018

Свойство 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>
0 голосов
/ 05 мая 2018

Чтобы сделать изображение скрытым по умолчанию и переключить скрытое / показывать на кнопке, дважды щелкающей мышью, используйте следующий код в тегах скрипта. 

<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>
0 голосов
/ 05 мая 2018

попробуйте это:

Это если вы начали скрытое изображение.

Как вы сейчас кодируете, вы предполагаете, что начальное состояние изображения видно.

Потому что, когда JavaScript в первый раз читает состояние видимости изображения, его значение равно нулю;

Причина как в этом сообщении стека :

Отмените ваши тесты if и else. JavaScript не может прочитать свойства CSS из стиля, если он явно не устанавливает их 

    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>
0 голосов
/ 05 мая 2018

Стили, установленные с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...