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

от
prokoding.ru > JavaScript > Здравствуйте у меня вопрос сможете решить пожалуйста ,как в Javascript отобразить и скрыть картинку при нажатии кнопку картинку приложу?

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

Допустим, у вас есть HTML разметка следующего вида:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Image</title>
</head>
<body>
    <img id="myImage" src="myImage.jpg" style="display: none;">
    <button onclick="toggleImage()">Toggle Image</button>
    <script src="script.js"></script>
</body>
</html>

В этой разметке есть картинка с идентификатором myImage, которая изначально скрыта с помощью стиля display: none;, а также кнопка, при нажатии на которую выполняется функция toggleImage().

Теперь создадим файл script.js, где напишем функцию toggleImage(), которая будет отображать или скрывать картинку в зависимости от ее текущего состояния:

function toggleImage() {
    var img = document.getElementById("myImage");

    if (img.style.display === "none") {
        img.style.display = "block";
    } else {
        img.style.display = "none";
    }
}

Эта функция получает элемент картинки по его идентификатору, и затем проверяет текущий стиль display элемента. Если картинка скрыта (display: none;), то она делает ее видимой (display: block;), и наоборот.

Теперь, после нажатия на кнопку "Toggle Image", картинка будет отображаться, а затем скрываться при каждом последующем нажатии.

Надеюсь, это поможет вам решить вашу задачу! Если у вас есть какие-либо дополнительные вопросы, не стесняйтесь задавать.