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

При создании страниц бывает нужно, чтобы при нажатии на помещенную в страницу кнопку в браузере происходило какое-либо запрограммированное автором событие. Для этого требуется поместить в создаваемый документ JavaScript-код и привязать его к нужной кнопке. В зависимости от объема кода, который необходим для реализации задуманного события, можно использовать разные способы подключения кнопки к коду.

Инструкция

Чаще всего вызов JavaScript-кода привязывают к событию onclick, то есть к щелчку по кнопке левой кнопкой мыши. Если для описания действия, которое должно произойти, не требуется большого объема кода, то его весь можно поместить прямо в тег кнопки. Например, чтобы запрограммировать браузер показывать простое сообщение при нажатии кнопки, JavaScript-сценарий должен выглядеть так:alert('Код сработал!')Требуется всего один оператор и текст. Все это без проблем можно поместить в описание события onclick тега button. Простейший HTML-код страницы в этом случае может выглядеть так:

Кнопка с кодом

Кнопка с кодом

Код более сложного JavaScript-сценария размещать непосредственно в теге кнопки нецелесообразно. Проще сделать из него отдельную функцию, а в событие onclick помесить ее вызов. Например, так может выглядеть функция, которая показывает окошко, содержащее время нажатия кнопки:function getTime() {

var now = new date();

alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());

}Ее следует разместить в заголовочной части страницы (между тегами и ). Полный код страницы с привязанным к кнопке вызовом этой функции может выглядеть так:

Кнопка с вызовом функции

function getTime() {

var now = new date();

alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());

}

Кнопка с вызовом функции

Этот же способ следует использовать, когда нажатие нескольких разных кнопок должно вызывать событие, которое можно описать одинаковым JavaScript-кодом. Например, можно немного изменить предыдущую функцию, чтобы она добавить в окошко с сообщением идентификацию нажатой кнопки: function getTime(btnString) {

var now = new date();

alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());

}Полный код страницы с тремя такими кнопками может выглядеть так:

Три кнопки с вызовом функции

function getTime(btnString) {

var now = new date();

alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());

}

Первая кнопка

Вторая кнопка

Третья кнопка

Оцените статью!