Инструкция
1
Чаще всего вызов JavaScript-кода привязывают к событию onclick, то есть к щелчку по кнопке левой кнопкой мыши. Если для описания действия, которое должно произойти, не требуется большого объема кода, то его весь можно поместить прямо в тег кнопки. Например, чтобы запрограммировать браузер показывать простое сообщение при нажатии кнопки, JavaScript-сценарий должен выглядеть так:alert('Код сработал!')Требуется всего один оператор и текст. Все это без проблем можно поместить в описание события onclick тега button. Простейший HTML-код страницы в этом случае может выглядеть так:<html>
<head>
<title>Кнопка с кодом</title>
</head>
<body><button onclick="javascript:alert('Код сработал!');">Кнопка с кодом</button></body>
</html>
2
Код более сложного JavaScript-сценария размещать непосредственно в теге кнопки нецелесообразно. Проще сделать из него отдельную функцию, а в событие onclick помесить ее вызов. Например, так может выглядеть функция, которая показывает окошко, содержащее время нажатия кнопки:function getTime() {
var now = new date();
alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());
}Ее следует разместить в заголовочной части страницы (между тегами <head> и </head>). Полный код страницы с привязанным к кнопке вызовом этой функции может выглядеть так:<html>
<head>
<title>Кнопка с вызовом функции</title>
<script>
function getTime() {
var now = new date();
alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());
}
</script>
</head>
<body><button onclick="getTime();">Кнопка с вызовом функции</button></body>
</html>
3
Этот же способ следует использовать, когда нажатие нескольких разных кнопок должно вызывать событие, которое можно описать одинаковым JavaScript-кодом. Например, можно немного изменить предыдущую функцию, чтобы она добавить в окошко с сообщением идентификацию нажатой кнопки: function getTime(btnString) {
var now = new date();
alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());
}Полный код страницы с тремя такими кнопками может выглядеть так:<html>
<head>
<title>Три кнопки с вызовом функции</title>
<script>
function getTime(btnString) {
var now = new date();
alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());
}
</script>
</head>
<body><button onclick="getTime(this.innerHTML);">Первая кнопка</button>
<button onclick="getTime(this.innerHTML);">Вторая кнопка</button>
<button onclick="getTime(this.innerHTML);">Третья кнопка</button></body>
</html>