html подія onclick

HTML

<div>
<p>Використання <code>onclick</code> спосіб 1</p><input type="button" value="Натисни мене " onclick="f()">
</div>

<div>
<p>Використання <code>onclick</code> спосіб 2</p><input type="button" value="Натисни мене " id="button_1">
</div>

<div>
<p>Використання <code>onclick</code> спосіб 3</p><input type="button" value="Натисни мене " id="button_2">
</div>

CSS

div{
  float:left;
  margin :20px;
}

JS

/*1*/
function f() {
  alert('Ви натиснули на кнопку #1');
}
/*2*/
button_1.onclick = function () {
  alert('Ви натиснули на кнопку #2');
};
/*3*/
var button_2 = document.getElementById("button_2");
button_2.onclick = function () {
  alert('Ви натиснули на кнопку #3');
};
//# sourceURL=pen.js

HTML

<div>
<p>Приклад використання <code>onclick</code> з різними елементами </p>
  <hr>
 <ul>
   <li><input type="input" onclick="f()"></li>
   
   <li><input type="checkbox" onclick="f2()" value="вибери мене">вибери мене</li>
   
      <li><input type="color" onclick="f3()" value="вибери мене">вибери Колір</li>
   
    <li onclick="f4()">Натисни на мене</li>
   
   <ul>

JS

/*1*/
function f() {
  alert('Ви перейшли в поле для вводу текту #1');
}
/*2*/
function f2() {
  alert('Ви натиснули на  checkBox #2');
}
/*3*/
function f3() {
  alert('Ви натиснули на кнопку вибору колору #3');
}
/*4*/
function f4() {
  alert('Ви натиснули на пункт списку #4');
}
//# sourceURL=pen.js

HTML

<div>
<p>Приклад використання <code>onclick</code> для створення нових блоків</p>
  <hr>
    <input type="button" onclick="f()" value="Створити пункт списку">
  <ul id="menu">
  </ul>

JS

/*1*/
var i = 0;
function f() {
  //Обмеження кількісті пункців спику
  if (i < 200) {
    var li = document.createElement('li');
    li.innerHTML = 'Пункт спику №' + i;
    i++;
    document.getElementById('menu').appendChild(li);
  }
}
//# sourceURL=pen.js