Как сделать чтобы при нажатии

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

Как сделать так чтобы при нажатии на li.button, img1 пропадал, а img11 наоборот появлялся? Но при повторном нажатии на li.button он опять становился img1(это только если кликнув на li.button на другое место если кликнув чтобы не срабатывало) В JavaScript не очень понимаю, помогите пожалуйста, спасибо.

.img1 < position: relative; float: left; padding-right: 10px; bottom: 5px; >li.button img.img11 < opacity: 0%; transition: 0.2s; >.img11

Вопрос задан более года назад
223 просмотра

2 комментария

Простой 2 комментария

Как сделать вызов функции при нажатии кнопки через javascript?

Чтобы сделать вызов функции при нажатии на кнопку, сначала в html документе создаём кнопку. Например, так:

 id="myButton">Press me!

Теперь переходим в подключенный к html документу javascript файл.

const callback = () =>  alert("Hello, World!"); >;

const button = document.querySelector('#myButton');

button.addEventListener('click', callback);

Теперь при нажатии кнопки увидим всплывающее окно с надписью Hello, World! .

Как кнопку сделать ссылкой?

В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.

Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.

Пример 2. Стилизация ссылки

Результат данного примера показан на рис. 1.

Рис. 1. Стилизация ссылки

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Событие onclick

См. также

Атрибуты
Кнопки
Кнопки
Кнопки в Bootstrap 4
Отправка данных формы
Отправка данных формы
Построение форм
Событие onclick
Создание кнопок
Создание форм
Сумасшедшие формы
Формы
Формы в Bootstrap 4
Формы в HTML

Сделать так, что бы при нажатии кнопка менялась

Подскажите пожалуйста — как сделать так, что бы при нажатии на кнопку она менялась, при отпускании становилась прежней, и при том при всем она еще и при наведении менялась, т.е. в этом цикле используется 3 вида кнопок (картинок). Прошу привести примеры через css и без. Как пример того, что я хочу визуально получить — это кнопка Яндекса «Найти» — наводишь на нее курсор — немного меняется, нажимаешь(но не отжимаешь) — меняется, убираешь курсор — становится прежней. У меня в css вот такой код для того, что бы при наведении курсора картинка менялась, как в этот код добавить что бы и при нажатии(но не клике) еще картинка менялась?

input.wpsc_buy_button < 
background-image: url(images/buy_button.png); 
border: none; 
width: 124px; 
height: 50px; 
text-align: center; 
/* vertical-align: top; */ 
padding: 0px 0px 0px 0px; 
font-size: 0pt; 
margin-top: 3px; 
color: #6a6c74; 
cursor: pointer 
> 
.wpsc_buy_button:hover < 
background: url(images/buy_button2.png); /* Путь к файлу с заменяемым рисунком */ 
>

Как сделать чтобы при нажатии