index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<p>Item 1</p>
<p class="one">Item 2 .one</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<div class="one">Класс .one</div>
</body>
</html>
1.js
// Когда элементов много, удобно обращаться по имени тега или класса.
var p = document.getElementsByTagName('p');
console.log(p);
var one = document.getElementsByClassName('one');
// p.onclick = f1; // ошибка
// p[0].onclick = f1; // ошибки нет
// Повесим f1() на каждый параграф. Запустим цикл.
for(var i = 0; i < p.length; i++) {
p[i].onclick = f1;
}
for(var i = 0; i < one.length; i++) {
one[i].onclick = f2;
}
function f1() {
// alert("Hello!");
// console.log('work');
console.log(this); // this - элемент, на котором произошло событие
this.style.background = 'pink'; // присвоим цвет фона по клику
}
function f2() {
this.style.fontWeight = 'bold';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<p>Item 1</p>
<p class="one">Item 2 .one</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<div class="one">Класс .one</div>
</body>
</html>
1.js
// Когда элементов много, удобно обращаться по имени тега или класса.
var p = document.getElementsByTagName('p');
console.log(p);
var one = document.getElementsByClassName('one');
// p.onclick = f1; // ошибка
// p[0].onclick = f1; // ошибки нет
// Повесим f1() на каждый параграф. Запустим цикл.
for(var i = 0; i < p.length; i++) {
p[i].onclick = f1;
}
for(var i = 0; i < one.length; i++) {
one[i].onclick = f2;
}
function f1() {
// alert("Hello!");
// console.log('work');
console.log(this); // this - элемент, на котором произошло событие
this.style.background = 'pink'; // присвоим цвет фона по клику
}
function f2() {
this.style.fontWeight = 'bold';
}
Комментариев нет:
Отправить комментарий