Курсы javascript
но там две кнопки, а нужно чтобы все работало от одной. При открытии страницы появилась кнопка с картинкой №1, нажал на кнопку — катанка №2 и так при каждом нажатии эти две картинки чередовались межу собой.
Всем спасибо.
02.03.2020, 13:47
Регистрация: 27.05.2010
Сообщений: 33,031
Untitled
02.03.2020, 13:48
Регистрация: 04.12.2012
Сообщений: 3,666
button < max-width: 300px; >img
02.03.2020, 14:02
Регистрация: 08.10.2014
Сообщений: 47
Всем спасибо за быстрый ответ! Сейчас попробую у себя сделать. Только вот проблема с кодом Nexus, при открытии файла в IE, вперёд появляется пустая (без картинки) кнопка, после первого нажатия появляется первый рисунок, потом 2-ой ну и так далее. В Chrome Edge такой проблемы нет. С вариантом рони таких проблем нет во всех 3-х браузерах.
Смена картинки при нажатии
Тебе нужно перенести блок с скриптом в конец body. т.к. HTML страница рендерится по очереди кода. ниже пример где должно работать:
Смена картинок 
var i=0; var image=document.getElementById("image"); // Добавте свои картинки через запятую var imgs=new Array('note.png','note_30.png', 'note_30_.png'); function imgsrc() Отслеживать
user236980
ответ дан 4 авг 2016 в 20:48
21 1 1 бронзовый знак
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Смена картинок по нажатии на кнопку?
Добрый день, подскажите как найти или сделать так, чтобы при нажатии на кнопку менялись картинки (их 3).
Например, пользователь видит 1 картинку прочитал на ней что-то нажал на кнопку и ту 1 картинку заменяет 2 фотография вновь прочитал что-то, нажал на кнопку и 2 фотографию заменяет 3.
из кода ничего особенного
- Вопрос задан более года назад
- 2079 просмотров
Комментировать
Решения вопроса 2
Старт в WordPress
document.body.addEventListener('click', e => < if (!e.target.matches('button')) return document.querySelector('.pic img').src = e.target.dataset.src document.querySelectorAll('button').forEach(btn =>btn.classList.remove('active')) e.target.classList.add('active') >)Ответ написан более года назад
Комментировать
Нравится Комментировать
Middle Front-end Developer (Vue.js/Nuxt.js)
Сначала составляете массив из ваших картинок, туда вставляете пути к ним.
Далее объявляете кнопку и блок с картинкой куда будете вставлять путь
По клику на кнопку вставляете картинку и при каждом клике увеличиваете переменную на 1, если переменная равна или больше кол-во картинок — обнуляете
Ответ написан более года назад
Комментировать
Нравится Комментировать
Появление и исчезновение картинки при клике по кнопке на Javascript
От одного из моих подписчиков на YouTube канале поступил достаточно интересный вопрос. Он спросил, как сделать так, чтобы при нажатии на кнопку появлялась картинка в браузере. А при повторном нажатии на кнопку, чтобы эта картинка исчезала.
Этот вопрос показался мне интересным по нескольким причинам. Во-первых – его задал человек, который совершенно не разбирается в программировании, а моя цель именно в том, чтобы помогать таким людям. Во-вторых, ответив на этот вопрос я могу одновременно раскрыть несколько тем по программированию на Javascript.
Алгоритм программы
Первое с чего нужно начинать создание любой программы – это продумать её алгоритм. То есть нужно расписать каждый шаг, который должна будет выполнить наша программа на пути к реализации поставленной задачи. А также, нужно составить алгоритм своих действий при написании программы.
Последовательность создания программы
- Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
- Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
- Создать событие для кнопки onClick, которое будет вызывать нашу функцию.
Алгоритм работы программы
- Нажатие на кнопку.
- Вызов функции.
- Если картинка в браузере не отображается, то показать её.
- Если картинка видна в браузере, то спрятать её.
Вот так вот приблизительно, для себя, мы набросали что должны сделать и как будем это реализовывать. Теперь можно приступать непосредственно к программированию.
Исчезновение картинки при клике по кнопке
Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.
HTML
JS
function myImg()
В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style. С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).
Отображение картинки при нажатии на кнопку
Теперь давайте сделаем так, чтобы при нажатии на кнопку, картинка отображалась в браузере.
HTML
JS
function myImg()
В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.
Появление и исчезновение картинки при нажатии кнопки
Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:
HTML
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.