Поява та зникнення картинки при натисканні кнопки на Javascript

Від одного з моїх підписників на YouTube каналі надійшло досить цікаве питання. Він запитав, як зробити так, щоб при натисканні на кнопку з'являлася картинка у браузері. А при повторному натисканні на кнопку, щоб ця картинка зникала.

Це запитання видалося мені цікавим з кількох причин. По-перше – його поставила людина, яка зовсім не розуміється на програмуванні, а моя мета саме в тому, щоб допомагати таким людям. По-друге, відповівши на це питання я можу одночасно розкрити кілька тем з програмування на Javascript і показати весь шлях створення простої програми від початку до кінця.

Алгоритм програми

Перше з чого потрібно розпочинати створення будь-якої програми – це продумати її алгоритм. Тобто потрібно розписати кожен крок, який має виконати наша програма на шляху до реалізації поставленого завдання. А також потрібно скласти алгоритм своїх дій при написанні програми.

Послідовність створення програми

1. Створити HTML документ і помістити на нього 2 об'єкти: картинку та кнопку.
2. Створити функцію, яка приховуватиме картинку (або відображатиме її), якщо користувач натисне кнопку.
3. Створити подію для кнопки onClick, яка викликатиме нашу функцію.

Алгоритм роботи програми

1. Натискання кнопки.
2. Виклик функції.
3. Якщо зображення в браузері не відображається, то показати його.
4. Якщо зображення видно в браузері, то сховати його.

Ось так приблизно, для себе, ми накидали що повинні зробити і як це реалізовуватимемо. Тепер можна розпочинати програмування.

Зникнення картинки при натисканні на кнопку

Для початку зробимо так, щоб при натисканні на кнопку картинка зникала.

HTML

<img id="img_1" style="display:block;" src="/Clipboard01.jpg">
<button type="submit" onclick="myImg()">Показати/Приховати зображення</button>

JS

function myImg() {
	document.getElementById('img_1').style.display='none';
}

У цьому прикладі, при завантаженні сторінки в браузері, ми виводимо на екран зображення Clipboard01. Для цієї картинки ми вказуємо атрибути id та style. За допомогою document.getElementById ми отримуємо посилання на елемент по його ідентифікатору (ID) і змінюємо атрибут style на display:none. Тобто робимо картинку невидимою (приховуємо її відображення у браузері).

Відображення картинки при натисканні на кнопку

Тепер давайте зробимо так, щоб при натисканні на кнопку картинка відображалася в браузері.

HTML

<img id="img_1" style="display:none;" src="/Clipboard01.jpg">
<button type="submit" onclick="myImg()">Показати/Приховати зображення</button>

JS

function myImg() {
	document.getElementById('img_1').style.display='block';
}

У цьому прикладі, ми просто поміняли місцями стиль відображення картинки. Тобто спочатку при відкритті HTML документа картинку у нас не видно (style="display:none;"), а коли ми натискаємо на кнопку, то відбувається заміна display:none на display: block і картинка стає видимою.

Поява та зникнення картинки при натисканні кнопки

Тепер, зрозумівши, як все працює, ми можемо об'єднати перший і другий варіант коду і написати умову, використовуючи оператори If Then Else:

HTML

<img id="img_1" style="display:none;" src="/Clipboard01.jpg">
<button id="submit" onclick="myImg()">Показати/Приховати зображення</button>

JS

function myImg() {
  let elem = document.getElementById('img_1'); // отримуємо елемент по ID
  let style = getComputedStyle(elem); // отримуємо його стилі
  if (style.display === 'none') {
    document.getElementById('img_1').style.display='block';
    } else if (style.display !== 'none') {
    document.getElementById('img_1').style.display='none';
  }
}

У цьому прикладі ми спочатку робимо картинку невидимою, вказавши style="display:none;".

При натисканні на кнопку, ми отримуємо посилання на нашу картинку по ID.

Потім за допомогою getComputedStyle отримуємо об'єкт, що містить значення всіх CSS-властивостей елемента (в даному випадку нашої картинки).

Після цього відбувається перевірка, якщо у картинки властивість display дорівнює none (тобто, якщо картинка не відображається), то ми змінюємо її на block і цим виводимо картинку на екран.

Якщо ж властивість display не дорівнює none (тобто зображення видно), то ми змінюємо його на none і тим самим приховуємо зображення.

В другій умові ми виконали перевірку саме нерівності (вказали НЕ дорівнює none), хоча могли написати умову else if (style.display === 'block'). Цей варіант теж буде працювати, але за умови, що для відображення картинки ми завжди будемо використовувати саме display:block.

Відео по темі уроку