Як зробити кнопку з кодом

Як зробити кнопку з кодом

При створенні сторінок буває потрібно, щоб при натисканні на вміщену в сторінку кнопку в браузері відбувалося якесь запрограмоване автором подія. Для цього потрібно помістити в створюваний документ JavaScript-код і прив’язати його до потрібної кнопки. Залежно від обсягу коду, який необхідний для реалізації задуманого події, можна використовувати різні способи підключення кнопки до коду.

Інструкція

  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>