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

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

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

 id="myButton">Press me!

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

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

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

button.addEventListener('click', callback);

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

как сделать нажатие на кнопку js

Для имитации нажатия на кнопку в JavaScript можно использовать метод click() . Этот метод вызывает событие «click» на элементе, на который он был вызван.

 id="myButton">Нажми меня

const button = document.getElementById('myButton'); // имитируем нажатие на кнопку button.click();

В этом примере мы получаем кнопку по ее id, а затем вызываем метод click() на этой кнопке. Это приведет к тому, что будет имитировано нажатие на кнопку.

Обратите внимание, что этот метод может вызвать обработчик события «click» на кнопке, но он не сработает, если кнопка заблокирована (например, атрибутом disabled ) или если обработчик события «click» был удален.

Важно сказать, что событие, вызванное методом click() , будет иметь те же свойства и методы, что и нативное событие ( target , currentTarget , preventDefault() , stopPropagation() ), но имеет некоторые ограничения. Например, может не сработать проверка на долгое нажатие.

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

Ну и небольшой лайфхак — как сделать это на чистом html-css (без js): создаёте два радиобаттона, скрываете их, в качестве кнопок стилизуете лейблы к ним и в зависимости от того, какой из radio выбран, открываете соответствующий блок — меню или корзину.

body < background: yellow; >.menu < height: 100vh; width: 370px; background: green; >.basket < height: 100vh; width: 370px; background: red; >.block_mini < margin-top: 50px; margin-left: 85px; width: 200px; height: 50px; background: black; >.btn < display: flex; >.btn_ < background: white; width: 150px; height: 40px; cursor: pointer; display: flex; justify-content: center; align-items: center; border: 1px solid gray; >[type="radio"], .menu, .basket < display: none; >#menu:checked ~ .menu, #basket:checked ~ .basket

   меню корзина

Отслеживать

ответ дан 13 янв 2021 в 11:16

humster_spb humster_spb

13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков

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

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

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

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

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

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

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

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

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

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

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

См. также

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