Задачи для решения

На elem.onclick

Даны картинки. Привяжите к каждой картинке событие, чтобы по клику на картинку алертом выводился ее src.

Решение:

<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
var elems = document.getElementsByTagName('img');
for (var i = 0; i < elems.length; i++) {
	elems[i].onclick = func;
}

function func() {
	alert(this.getAttribute('src'));
}

На addEventListener, removeEventListener

Даны ссылки. Привяжите всем ссылкам событие - по наведению на ссылку в атрибут title запишется ее текст.

Решение:

<a href="#" title="">Текст первой ссылки</a>
<a href="#" title="">Текст второй ссылки</a>
<a href="#" title="">Текст третьей ссылки</a>
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('mouseover', func);
}

function func() {
	this.title = this.innerHTML;
}

Привяжите всем ссылкам событие - по наведению на ссылку в конец ее текста дописывается ее href в круглых скобках.

Решение:

<a href="http://ya.ru" title="">Текст первой ссылки</a>
<a href="http://tut.by" title="">Текст второй ссылки</a>
<a href="http://google.com" title="">Текст третьей ссылки</a>
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('mouseover', func);
}

function func() {
	this.innerHTML = this.innerHTML + ' (' + this.href + ')';
}

Дополните предыдущую задачу: после первого наведению на ссылку следует отвязать от нее событие, которое добавляет href в конец текста.

Решение:

<a href="http://ya.ru" title="">Текст первой ссылки</a>
<a href="http://tut.by" title="">Текст второй ссылки</a>
<a href="http://google.com" title="">Текст третьей ссылки</a>
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('mouseover', func);
}

function func() {
	this.innerHTML = this.innerHTML + ' (' + this.href + ')';
	this.removeEventListener('mouseover', func);
}

Привяжите всем инпутам следующее событие - по потери фокуса каждый инпут выводит свое value в абзац с id="test".

Решение:

<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<p id="test"></p>
var elems = document.getElementsByTagName('input');
var parag = document.getElementById('test');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('blur', func);
}

function func() {
	parag.innerHTML = this.value;
}

Для всех инпутов сделайте так, чтобы они выводили свой value алертом при нажатии на любой из них, но только по первому нажатию. Повторное нажатие на инпут не должно вызывать реакции.

Решение:

<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
var elems = document.getElementsByTagName('input');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('click', func);
}

function func() {
	alert(this.value);
	this.removeEventListener('click', func);
}

Даны абзацы с числами. По нажатию на абзац в нем должен появится квадрат числа, которое он содержит.

Решение:

<p>2</p>
<p>4</p>
<p>6</p>
var elems = document.getElementsByTagName('p');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('click', func);
}

function func() {
	this.innerHTML = this.innerHTML * this.innerHTML;
}

Даны инпуты. Сделайте так, чтобы все инпуты по потери фокуса проверяли свое содержимое на правильное количество символов. Сколько символов должно быть в инпуте, указывается в атрибуте data-length. Если вбито правильное количество, то граница инпута становится зеленой, если неправильное - красной.

Решение:

<input type="text" data-length="4">
<input type="text" data-length="7">
<input type="text" data-length="9">
var elems = document.getElementsByTagName('input');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('blur', func);
}

function func() {
	var correctLength = this.dataset.length; //правильное количество
	var inputDataLength = this.value.length; //вбитое в инпут количество
	if(correctLength == inputDataLength){
		this.style.borderColor = 'green';
	} else {
		this.style.borderColor = 'red';
	}
}

Даны дивы. По первому нажатию на каждый див он красится красным фоном, по второму красится обратно и так далее каждый клик происходит чередование фона. Сделайте так, чтобы было две функции: одна красит в красный цвет, другая в зеленый и они сменяли друг друга через removeEventListener.

Решение:

<div>1</div>
<div>2</div>
<div>3</div>
var elems = document.getElementsByTagName('div');
for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('click', setRed);
}

function setRed() {
	this.style.background = 'red';
	this.removeEventListener('click', setRed);
	this.addEventListener('click', setGreen);
}

function setGreen() {
	this.style.background = 'green';
	this.removeEventListener('click', setGreen);
	this.addEventListener('click', setRed);
}