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

Урок

Даны 3 инпута и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в четвертый инпут.

Решение:

<input class="cls" type="text" value="" placeholder="число">
<input class="cls" type="text" value="" placeholder="число">
<input class="cls" type="text" value="" placeholder="число">
<button id="task">жми</button>
<input id="sum" type="text" value="">   
var elem = document.getElementById('task');
elem.addEventListener('click', func);
var elem1 = document.getElementsByClassName('cls');

function func() {
	var sum = 0;
	for (var i = 0; i < elem1.length; i++) {
		sum += +elem1[i].value;
	}
	var newElem = document.getElementById('sum');
	newElem.value = sum;
}    

Даны N инпутов с классом .num и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в абзац с id="result".

Решение:

<input class="num" type="text" value="" placeholder="число">
<input class="num" type="text" value="" placeholder="число">
<input class="num" type="text" value="" placeholder="число">
<button id="task">жми</button>
<p id="result"></p>    
var elem = document.getElementById('task');
elem.addEventListener('click', func);
var elem1 = document.getElementsByClassName('num');

function func() {
	var sum = 0;
	for (var i = 0; i < elem1.length; i++) {
		sum += +elem1[i].value;
	}
	var newElem = document.getElementById('result');
	newElem.innerHTML = sum;
}    

Дан инпут. В него вводится число. По потери фокуса найдите сумму цифр этого числа.

Решение:

<input id="num" type="text" value="" placeholder="число">
<p id="result"></p>     
var elem = document.getElementById('num');
elem.addEventListener('blur', func);

function func() {
	var sum = 0;
	var str = elem.value;
	var arr = str.split('');
  	for (var i = 0; i < arr.length; i++) {
		sum += +arr[i];
	}
	var newElem = document.getElementById('result');
	newElem.innerHTML = sum;
}    

Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество).

Решение:

<input id="num" type="text" value="" placeholder="введите числа через запятую">
<p id="result"></p>     
var elem = document.getElementById('num');
elem.addEventListener('blur', func);

function func() {
	var sum = 0;
	var str = elem.value;
	var arr = str.split(',');
  	for (var i = 0; i < arr.length; i++) {
		sum += +arr[i];
	}
	var newElem = document.getElementById('result');
	newElem.innerHTML = sum/arr.length;
}    

Дан инпут. В него вводится ФИО через пробел. По потери фокуса запишите фамилию, имя и отчество в отдельные инпуты.

Решение:

<input type="text" id="input" placeholder="Введите Ваши ФИО">
<input type="text" class="name">
<input type="text" class="name">
<input type="text" class="name">   
var elem = document.getElementById('input');
elem.addEventListener('focus', func);
elem.addEventListener('blur', func2);
  
function func() {
	elem.placeholder = '';
}

function func2() {
	var elem = document.getElementById('input');
	var elems = document.getElementsByClassName('name');
	if (elem.value !== 0) {
		var str = elem.value;
		var arr = str.split(' ');
		for (var i = 0; i < arr.length; i++) {
			elems[i].value = arr[i];
		}
	}
	if (elem.value == 0) {
		elem.placeholder = 'Введите Ваши ФИО';
		for (var i = 0; i < elems.length; i++) {
			elems[i].value = '';
		}
	}
}        

Дан инпут. В него вводится ФИО через пробел. ФИО вводится с маленькой буквы. Сделайте так, чтобы по потери фокуса инпутом, введенные фамилия, имя и отчество автоматически стали записанными с большой буквы (в том же инпуте).

Решение:

<input type="text" id="input" placeholder="Введите Ваши ФИО">   
var elem = document.getElementById('input');
 elem.addEventListener('blur', bigLetter);

function uswords(str) {
	var arr = str.split(' ');
	for (var i = 0; i < arr.length; i++) {
		arr[i] = arr[i].split('');
		arr[i][0] = arr[i][0].toUpperCase();
		arr[i] = arr[i].join('');
	}
	str = arr.join(' ');
	return str;
}

function bigLetter() {
	elem.value = uswords(elem.value);
}  

Дан инпут. В него вводится текст. По потери фокуса узнайте количество слов в этом тексте.

Решение:

<input type="text" id="num" value="">
<p id="result"></p>    
var elem = document.getElementById('num');
elem.addEventListener('blur', func);

function func() {
	var num = 0;
	var str = elem.value;
	var arr = str.split(' ');
	for (var i = 0; i < arr.length; i++) {
		num += 1;
 	}
	var p = document.getElementById('result');
	p.innerHTML = num;
}    

Дан инпут. В него вводится текст. По потери фокуса узнайте количество символов в самом длинном слове в этом тексте.

Решение:

<input type="text" id="num" value="">
<p id="result"></p>    
var elem = document.getElementById('num');
elem.addEventListener('blur', func);

function func() {
	var max = 0;
	var arr2 = [];
	var str = elem.value;
	var arr = str.split(' ');

	for (var i = 0; i < arr.length; i++) {
		var num = 0;
		arr2 = arr[i].split('');
 		for (var j = 0; j < arr2.length; j++) {
			num += 1		}
		if (num > max) {
			max = num;
 		} 
 	}
	var p = document.getElementById('result');
	p.innerHTML = max;
}    

Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса в этом же инпуте поставьте эту дату в формате 2016-12-31.

Решение:

<input type="text" id="num" value="">   
var elem = document.getElementById('num');
elem.addEventListener('blur', func);

function func() {
	var arr2 = [];
	var str = elem.value;
	var arr = str.split('.');
	arr2 = arr.reverse();
	var str1 = arr2.join('-');
	elem.value = str1;
} 

Дан инпут. В него вводится год рождения пользователя. По нажатию на кнопку выведите в абзац ниже сколько пользователю лет.

Решение:

<input id="num" type="text" value="" placeholder="Введите год рождения">
<button id="btn">жми</button>
<p id="result"></p>    
var elem = document.getElementById('num');
var elem1 = document.getElementById('btn');
this.addEventListener('click', func);

function func() {
	var year = elem.value;
	var date = new Date();
	var yearNow = date.getFullYear();
	var p = document.getElementById('result');
	p.innerHTML = yearNow - year;
} 

Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса узнайте день недели (словом), который приходится на эту дату.

Решение:

<input id="num" type="text" value="" placeholder="Введите дату">
<p id="text"></p> 
var elem = document.getElementById('num');
elem.addEventListener('click', func);

function func() {
	var dayWeak = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
 	var str = elem.value;
	var arr = str.split('.');
	var arr2 = arr.reverse();
	var str1 = arr2.join(',')
	var date = new Date(str1);
	var day = date.getDay();
	var p = document.getElementById('text');
	p.innerHTML = dayWeak[day];
}

Дан инпут. В него вводится слово. По нажатию на кнопку проверьте то, что это слово читается с начала и с конца одинаково (например, мадам).

Решение:

<input id="num" type="text" value="" placeholder="Введите дату">
<button id="but">Жми</button>  
var elem = document.getElementById('num');
var btn = document.getElementById('but');
btn.addEventListener('click', func);

function func() {
	var str = elem.value;
 	var arr = str.split('');
	var arr2 = str.split('').reverse();
	for(var i = 0; i < arr.length; i++) {
		if(arr[i]!== arr2[i]) { 
			alert('это слово не палиндром');
			return;
		}
  	}
	alert('это слово палиндром');
	return;
}

Дан инпут. В него вводится число. Проверьте по вводу, что это число содержит внутри себя цифру 3.

Решение:

<input id="num" type="text" value="" placeholder="введите число"> 
var elem = document.getElementById('num');
elem.addEventListener('click', func);

function func() {
	var str = elem.value;
	var arr = str.split('');
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] == 3) {
			alert('это число содержит 3');
			return;
  		}
	}
	alert('это число не содержит 3');
	return;
}

Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.

Решение:

<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
<button id="btn">Жми</button>  
var elem = document.getElementsByTagName('p');
var btn= document.getElementById('btn');
btn.addEventListener('click', func);

function func() {
	for (var i = 0; i< elem.length; i++) {
		elem[i].innerHTML = elem[i].innerHTML+' '+(i + 1);
	}
 }   

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

Решение:

<p>1</p>
<p>2</p>
<p>3</p>
<button id="btn">Жми</button>
<input id="num" type="text" value="">   
var elem = document.getElementsByTagName('p');
var btn= document.getElementById('btn');
btn.addEventListener('click', func);

function func() {
	var arr2 = [];
 	for (var i = 0; i< elem.length; i++) {
		arr2[i] = +elem[i].innerHTML;
	}
	var input = document.getElementById('num');
	input.value = arr2.sort(sortArr);
   }

function sortArr(a, b) {
	if (a > b) {
		return -1;
	}
	if (a < b) {
		return -1;
 	}
	if (a == b) {
		return 0;
 	}
 }   

Даны ссылки. По загрузке страницы добавьте в конец каждой ссылки ее href в круглых скобках.

Решение:

<a href="123">ссылка1</a>
<a href="333">ссылка2</a>
<a href="752">ссылка3</a>   
var elem = document.getElementsByTagName('a');

function start() {
	for (var i = 0; i < elem.length; i++) {
		elem[i].innerHTML = elem[i].innerHTML + '(' +elem[i].href+')';
	}
 }    

Даны ссылки. По загрузке страницы, если ссылка начинается с http://, то добавьте ей в конец стрелку → (делается так: &rarr;).

Решение:

<a href="http://google.com">ссылка1</a>
<a href="333">ссылка2</a>
<a href="752">ссылка3</a>  
var elem = document.getElementsByTagName('a');

function start() {
	for (var i = 0; i < elem.length; i++) {
		if (elem[i].href.indexOf('http://') == 0) {
 			elem[i].innerHTML = elem[i].innerHTML + 'стрелка';
		}
	}
 }    

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

Решение:

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

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

Даны картинки. По нажатию на любую картинку увеличьте ее в 2 раза.

Решение:

<img src="images/smile.jpg" id="img">
<img src="images/smile2.jpg" id="img">
<img src="images/smile3.jpg" id="img"> 
var elem = document.getElementsByTagName('img');
for (var i = 0; i < elem.length; i++){
	elem[i].addEventListener('click', func);
 }

function func() {
	this.height = this.height * 2;
 }    

Даны картинки. По первому нажатию на любую картинку увеличьте ее в 2 раза. По второму нажатию - уменьшите обратно.

Решение:

<img src="images/smile.jpg" id="img">
<img src="images/smile2.jpg" id="img">
<img src="images/smile3.jpg" id="img"> 
var elem = document.getElementsByTagName('img');
for (var i = 0; i < elem.length; i++){
	elem[i].addEventListener('click', func);
 }

function func() {
	this.height = this.height * 2;
	this.removeEventListener('click', func);
	this.addEventListener('click', reback);
  }

function reback() {
	this.height = this.height / 2;
	this.removeEventListener('click', reback);
	this.addEventListener('click', func);
}    

Даны N картинок размера 30px. По нажатию на картинку под ними эта картинка появляется размером в 50px.

Решение:

<img src="images/smile.jpg" id="img" style="height:30px;">
<img src="images/smile2.jpg" id="img" style="height:30px;">
<img src="images/smile3.jpg" id="img" style="height:30px;">
<img  id="task" style="height:50px;"> 
var elem = document.getElementsByTagName('img');
for (var i = 0; i < elem.length; i++) {
	elem[i].addEventListener('click', func);
 }

function func() {
	var bigImg = document.getElementById('task');
	bigImg.src = this.src;
}     

Дан инпут. Реализуйте кнопочки +1, -1, которые будут увеличивать или уменьшать на 1 значение инпута. Сделайте так, чтобы это значение не могло стать меньше нуля.

Решение:

<input id="num" type="text" value="0">
<input class="cls" type="submit" value="1">
<input class="cls" type="submit" value="-1">
 
var elem = document.getElementById('num');
var btnElem = document.getElementsByClassName('cls');
for (var i = 0;i < elem.length; i++) {
	btnElem[i].addEventListener('click', func);
 }

function func() {
	var number = +elem.value+ +this.value;
	if (number >= 0){
		elem.value = number;
 	} else {
		elem.value = 0;
	}
}      

Урок

Дан инпут. В него вводится число. По потери фокуса проверьте, что в нем лежит число от 1 до 100. Если это так - покрасьте инпут в зеленый цвет, а если не так - в красный.

Решение:

<input type="text">
var inp = document.querySelector('input');
inp.addEventListener('blur', func);

function func() {
	var content = inp.value;
	if (content > 0 && content < 101){
		inp.style.background = 'green';
	} else {
		inp.style.background = 'red';
	}
}     

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

Решение:

<input type="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
var inp = document.querySelector('input');
document.documentElement.addEventListener('mouseup', func);

function func() {
	var content = window.getSelection().toString();
	inp.value = content;
}     

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

Решение:

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

function func() {
	var inp = document.querySelector('input');
	inp.value = Number(inp.value) + 1;
}  

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

Решение:

<p>Текст1</p>
<p>Текст2</p>
<p>Текст3</p>
<input type="text" value="" id="result">
var inp = document.getElementById('result');
var p = document.getElementsByTagName('p');
for (var i = 0; i < p.length; i++) {
	p[i].addEventListener('click', func);
 }

var count = 0;
function func() {
	count++;
	inp.value = count;
} 

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

Решение:

<body onload="start()">
 	<input type="text" value="2" id="result">
</body> 
var inp = document.getElementById('result');

function start() {
	window.setInterval(timer, 1000);
 }

function timer() {
	inp.value = inp.value * inp.value;
 }    

Дан инпут и кнопка. По нажатию на кнопку сгенерируйте случайную строку из 8-ми символов и запишите в инпут.

Решение:

<input type="text">
<button>Жми</button>
var inp = document.querySelector('input');
var btn = document.querySelector('button');
btn.addEventListener('click', func);

function func() {
	var str = '';
	var symbols = '0123456789qwertyuiopasdfghjklzxcvbnm';
	for(var i = 0; i < 8; i++){
		str += symbols.charAt(Math.floor(Math.random() * symbols.length));
		inp.value = str;
	}
} 

Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задается длина случайной строки.

Решение:

<input type="text" value="" id="task">
<input type="text" value="" id="length" placeholder="введите количество символов строки">
<button id="btn" onclick='func()'>Жми</button>
var input = document.getElementById('task');

function func() {
	var rand = [];
	var str = '0123456789qwertyuiopasdfghjklzxcvbnm';
	var arr = str.split('');
	for (var i = 0; i < 8; i++) {
		rand[i] = arr[getRandom(0, arr.length)];
	}
	input.value = rand.join('');
}

function getRandom(min, max) {
	return Math.floor(Math.random() * max - min + 1) + min;
}  

Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задаются символы, из которых формируется эта случайна строка. Символы задаются без всяких разделитетей, в одну строку.

Решение:

<input type="text" value="" id="task">
<input type="text" value="" id="length" placeholder="введите количество символов строки">
<input type="text" value="" id="symbols" placeholder="введите символы">
 <button id="btn" onclick='func()'>Жми</button>
var input = document.getElementById('task');
var str = document.getElementById('symbols');
 
function func() {
	var rand = [];
	var arr = str.value.split('');
 	var arr = str.split('');
	for (var i = 0; i < 8; i++) {
		rand[i] = arr[getRandom(0, arr.length)];
	}
	input.value = rand.join('');
}

function getRandom(min, max) {
	return Math.floor(Math.random() * max - min + 1) + min;
}  

Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы в абзаце ниже начал тикать обратный отсчет, начиная с введенного числа. Когда отсчет дойдет до нуля - он должен закончится.

Решение:

<input type="text" value="" id="task" placeholder="введите число" onblur="func()">  
var input = document.getElementById('task');
function func() {
	window.funcId = window.setInterval(go, 500);
 }

function go() {
	if (parseInt(input.value) > 0) {
		input.value = parseInt(input.value) -1;
	}
 	if(parseInt(input.value) == 0) {
		stop();
 	}
 }

function stop() {
	window.clearInterval(window.funcId);
 } 

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

Решение:

<p id="text">Javascript</p>   
var p = document.getElementById('text');
window.setInterval(func, 1000);

function func() {
	if(p.style.color =='red') {
		p.style.color = 'green';
 	} else {
		p.style.color ='red';
	}
  }   

Дан абзац. Дан массив цветов ['red', 'green', 'blue']. Сделайте так, чтобы каждую секунду абзац менял свой цвет на определенное значение их массива: сначала 'red', потом 'green' и так далее. Как только цвета в массиве закончатся - все начнется сначала. Количество цветов в массиве может быть любым.

Решение:

<p id="text">Javascript</p>   
var p = document.getElementById('text');
window.setInterval(func, 1000);
var arr = ['red', 'green', 'blue'];
var i = 0;
 
function func() {
	p.style.color = arr[i];
	i++;
	if (i >= arr.length) {
		i = 0;
 	}
}   

Дан абзац. Дан массив строк ['один', 'два', 'три']. Под абзацем ссылка 'следующая строка'. По заходу на страницу в абзаце должен стоять нулевой элемент этого массива, а по нажатию на ссылку - вставлятся следующий элемент.

Решение:

<body onload="start()">
 	<p id="text">Javascript</p>
	<a href="#" id="next" onclick="func()">следующая строка</a>
</body>    
var p = document.getElementById('text');
var a = document.getElementById('next');
var arr = ['один', 'два', 'три'];
var i = 0;
 
function start() {
	p.innerHTML = arr[i];
	i++;
  }

 function func() {
	p.style.color = arr[i];
	i++;
	if (i >= arr.length) {
		i = 0;
 	}
}   

Даны инпуты с числами. Произвольное количетсво, пусть три. В первый инпут запишите 1, через секунду во второй инпут запишите 2, еще через секунду в третий инпут 3, потом через секунду в первый инпут запишите 4, во второй 5 и так далее до бесконечности.

Решение:

<input type="text" value="">
<input type="text" value="">
<input type="text" value="">     
var inp = document.getElementsByTagName('input');
window.setInterval(func, 1000);
var num = 1;
var i = 0;
function func() {
	input[i].value = num;
	num++;
	i++;
	if ( i >= input.length) {
		i = 0;
 	}
}       

Урок

Дана ссылка. Дан чекбокс. По нажатию на ссылку меняйте состояние чекбокса с отмеченного на неотмеченное и наоборот.

Решение:

<input id="text" type="checkbox" checked="">
<a href='#' onclick="func()">ссылка</a>       
function func() {
	var elem = document.getElementById('text');
	if (elem.checked) {
		elem.checked = false;
 	} else {
		elem.checked = true;
 	}
  }       

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

Решение:

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button onclick="func()">Жми</button>         
function func() {
	var elem = document.getElementsByTagName('input');
	for (var i = 0; i < elem.length; i++) {
		elem[i].checked = true;
 	}
}       

Спросите у пользователя какой язык (html, css, js, php) он знает с помощью радио кнопочек. Выведите этот язык в абзац.

Решение:

<input type="radio" name="raz" value="html">html 
<input type="radio" name="raz" value="css">css 
<input type="radio" name="raz" value="js">js 
<input type="radio" name="raz" value="php">php 
<p id="text"></p>              
var elem = document.getElementsByTagName('input');
var p = document.getElementById('text');
for (var i = 0; i < elem.length; i++) {
	elem[i].addEventListener('change', func);
}

function func() {
	if(this.checked) {
		p.innerHTML=this.value;
 	}
}  

Спросите у пользователя какие языки (html, css, js, php) он знает с помощью чекбоксов. Выбранные языки должны выводится в абзац ниже через запятую.

Решение:

<input type="radio" name="raz" value="html">html 
<input type="radio" name="raz" value="css">css 
<input type="radio" name="raz" value="js">js 
<input type="radio" name="raz" value="php">php 
<p id="text"></p>              
var elem = document.getElementsByTagName('input');
var p = document.getElementById('text');
var arr = [];
for (var i = 0; i < elem.length; i++) {
	elem[i].addEventListener('change', func);
}

function func() {
	if(this.checked) {
		arr.push(this.value);
		p.innerHTML = arr;
 	}
}  

Дан чекбокс. Дан инпут. Сделайте так, что если чекбокс отмечен - инпут видимый, если не отмечен - не видимый.

Решение:

<input id="test" type="checkbox" checked="" onchange="func()">
<input id="text" type="text" value="">               
var elem = document.getElementById('test');
var input =document.getElementById('text');
function func() {
	if (!elem.checked) {
		input.style.display = "none";
 	} else {
		input.style.display = "inline";
 	}
 }  

Даны чекбоксы. Под каждым чекбоксом размещен абзац. Сделайте так, что если чекбокс отмечен - соответствующий абзац видимый, а если не отмечен - не видимый.

Решение:

<input type="checkbox" onclick="func()" checked="">
<p>123</p>
<input type="checkbox" onclick="func()" checked="">
<p>456</p>                   
function func() {
 	var input = document.getElementsByTagName('input');
	var elem = document.querySelectorAll('input + p');
	for (var i = 0; i< input.length; i++) {
		if (!input[i].checked) {
			elem[i].style.display = "none";
		} else {
			elem[i].style.display = "block";
 		}
 	}
}    

Дан инпут. Даны li. В инпут пишется номер. Сделайте так, чтобы по вводу числа, li с заданным номером покрасился в красный цвет.

Решение:

<input id="text" type="text" value="" onchange="func()">

<ol>
	<li>Текст1</li>
	<li>Текст2</li>
	<li>Текст3</li>
</ol>                    
var input = document.getElementById('text');
var n = 0;
function func() {
	n = +input.value;
	var elem = document.querySelectorAll('li');
	elem[n-1].style.color = 'red';
 }   

Дан абзац. Даны чекбоксы 'перечеркнуть', 'сделать жирным', 'сделать красным'. Если соответствующий чекбокс отмечен - заданное действие происходит с абзацем (становится красным, например). Если чекбоксу снять отметку - действие отменяется.

Решение:

<p id='text'>123</p>
<input type="checkbox" value="text-decoration:line-through;">перечеркнуть 
<input type="checkbox" value="font-weight:bold;">сделать жирным 
<input type="checkbox" value="color:red">сделать красным                     
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
	input[i].addEventListener('change', func);
}
var p = document.getElementById('text');

function func() {
	if (this.checked) {
		p.style.cssText = this.value;
	} else {
		p.style.cssText = 'none';
	}
}

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

Решение:

<div>
	<p>По нажатию на эту кнопку</p>
	<button id="task">Закрыть</button>
</div>                     
var button = document.getElementsByTagName('button');
for (var i = 0; i < button.length; i++) {
	button[i].addEventListener('click', func)
}

function func() {
	this.parentNode.style.display = 'none';
}

Урок

В инпут через запятую вводятся страны. По нажатию на кнопку сделайте так, чтобы эти страны записались в ul под инпутом (каждая страна отдельный li).

Решение:

<input type="text">
<button>Жми</button>
<ul></ul>                   
var inp = document.querySelector('input');
var btn = document.querySelector('button');
var list = document.querySelector('ul');
btn.addEventListener('click', func);

function func() {
	var str = inp.value;
	var arr = str.split(',');
	var item;
	list.innerHTML = '';
	for (var i = 0; i < arr.length; i++){
		item = document.createElement('li');
		item.innerHTML = arr[i];
		list.appendChild(item);
	}
}

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

Решение:

<input type="text">
<p></p>                   
var inp = document.querySelector('input');
var parag = document.querySelector('p');
inp.addEventListener('keypress', func);

function func(event) {
	if (event.which == 13) {
	parag.innerHTML += inp.value + ',';
	inp.value = '';
	}
}

На странице есть дивы. В них есть текст. Обойдите все дивы и обрежьте тот текст, который в них стоит так, чтобы он стал длиной 10 символов. И добавьте троеточие в конец обрезанного текста

Решение:

<div>Lorem ipsum dolor</div>
<div>sit amet, consectetur adipisicing</div>
<div>debitis voluptate eos </div>
<button>Обрезать</button>                   
var btn = document.querySelector('button');
btn.addEventListener('click', func);
var elems = document.getElementsByTagName('div');
var str = '';

function func () {
	for(var i = 0; i < elems.length; i++) {
		str = elems[i].innerHTML.slice(0, 10)+'...';
		elems[i].innerHTML = str;
	}
}

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

Решение:

<table>
	<tr>
		<td>25</td>
		<td>11</td>
		<td>8</td>
	</tr>
	<tr>
		<td>54</td>
		<td>13</td>
		<td>22</td>
	</tr>
	<tr>
		<td>15</td>
		<td>23</td>
		<td>6</td>
	</tr>
</table>

<button>Жми</button>                 
var elems = document.getElementsByTagName('td');
var trigger = document.querySelector('button');
trigger.addEventListener('click', func);
var max ='';
var n = 0;

function func() {
	for (var i = 0; i < elems.length; i++) {
		if (+elems[i].innerHTML > max) {
			max = +elems[i].innerHTML;
			n = i;
		}
	}
	elems[n].style.background = 'red';
}

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

Решение:

<table>
	<tr>
		<td>25</td>
		<td>11</td>
		<td>8</td>
	</tr>
	<tr>
		<td>54</td>
		<td>13</td>
		<td>22</td>
	</tr>
	<tr>
		<td>15</td>
		<td>23</td>
		<td>6</td>
	</tr>
</table>

<input type="text"><button>Жми</button>                 
var elems = document.getElementsByTagName('td');
var trigger = document.querySelector('button');
var inp = document.querySelector('input');
trigger.addEventListener('click', func);

function func() {
	var arr = [];
	for (var i = 0; i < elems.length; i++) {
		arr.push(elems[i].innerHTML);
	}
	arr.sort();
	var str = arr.join(', ');
	inp.value = str;
} 

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

Решение:

<table>
	<tr>
		<td>25</td>
		<td>11</td>
		<td>8</td>
	</tr>
	<tr>
		<td>54</td>
		<td>13</td>
		<td>22</td>
	</tr>
	<tr>
		<td>15</td>
		<td>23</td>
		<td>6</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<input type="text"><button>Жми</button>                 
var btn = document.querySelector('button');
var rows = document.getElementsByTagName('tr');
btn.addEventListener('click', func);

function func() {
	var arr = [];
	for (var i = 0; i < rows.length-1; i++) {
		for(var j = 0; j < rows[i].children.length; j++) {
			if (arr[j] == undefined) {
				arr[j] = 0;
			}
			arr[j] += Number(rows[i].children[j].innerHTML);
		}
	}
	for (var k = 0; k < rows[rows.length-1].children.length; k++) {
		rows[rows.length-1].children[k].innerHTML = arr[k];
	}
}

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

Решение:

<table>
	<tr>
		<td>25</td>
		<td>11</td>
		<td>8</td>
	</tr>
	<tr>
		<td>54</td>
		<td>13</td>
		<td>22</td>
	</tr>
	<tr>
		<td>15</td>
		<td>23</td>
		<td>6</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<button id="go">Старт</button>
<button id="clear">Очистить</button>                
window.onload = function () {
	var elems = document.querySelectorAll('td');
	for (var i = 0; i < elems.length; i++) {
		elems[i].addEventListener('click', function () {
		this.classList.add('active');
		});
  	}

	document.querySelector('#go').addEventListener('click', function () {
		var elems = document.querySelectorAll('.active');
		var sum = 0;
		for (var i = 0; i < elems.length; i++) {
			sum += Number(elems[i].innerHTML);
 		}		var p = document.createElement('p');
		p.innerHTML = "Сумма активных ячеек: " + sum;
		document.body.appendChild(p);
	});

	document.querySelector('#clear').addEventListener('click', function () {
		var elems = document.querySelectorAll('td');
		for (var i = 0; i < elems.length; i++) {
			elems[i].classList = [];
 		}
	});
} 

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

Решение:

<table>
	<tr>
		<td>25</td>
		<td>11</td>
		<td>8</td>
	</tr>
	<tr>
		<td>54</td>
		<td>13</td>
		<td>22</td>
	</tr>
	<tr>
		<td>15</td>
		<td>23</td>
		<td>6</td>
	</tr>
</table>              
window.onload = function () {
	var tdelements = document.querySelectorAll('td');
	for (var i = 0; i < tdelements.length; i++) {
		tdelements[i].addEventListener('click', function () {
 		var val = this.innerHTML;
		this.style.display = "none";
		var inp = document.createElement('input');
		inp.value = val;
		inp.addEventListener('change', function () {
			this.previousElementSibling.innerHTML = this.value;
			this.previousElementSibling.style.display = "";
			this.parentNode.removeChild(this);
		});
		this.parentNode.insertBefore(inp, this.nextSibling);
   		});
	}
}

Реализуйте раскрывающийся список. По умолчанию есть список стран (ul), по нажатию на страну внутри li со страной появляется список городов.

Решение:

<ul>
	<li>
	<p>asda</p>
	<ul hidden>
		<li>adfa</li>
		<li>adfa</li>
		<li>adfa</li>
		<li>adfa</li>
	</ul>
	</li>
	<li>
	<p>asda</p>
	<ul hidden>
		<li>adfa</li>
		<li>adfa</li>
		<li>adfa</li>
		<li>adfa</li>
	</ul>
	</li>
	<li>
	<p>asda</p>
	<ul hidden>
		<li>adfa</li>
		<li>adfa</li>
		<li>adfa</li>
		<li>adfa</li>
	</ul>
	</li>
</ul>            
var country = document.querySelectorAll('p');
for(var i = 0; i < country.length; i++) {
	country[i].addEventListener('click', show);
}

function show() {
	this.nextElementSibling.style.display = 'block';
	this.removeEventListener('click', show);
	this.addEventListener('click', hide);
}

function hide(){
	this.nextElementSibling.style.display = 'none';
	this.removeEventListener('click', hide);
	this.addEventListener('click', show);
}

Урок

Даны два селекта. В первом находятся страны, во втором - города. Сделайте так, чтобы когда выбирается определенная страна - в другом селекте появлялись города этой страны. В абзац ниже пишите выбранную страну и город через запятую.

Решение:

<select name="country" id="country">
	<option value="aus">Австралия</option>
	<option value="jap">Япония</option>
	<option value="sar">ЮАР</option>
</select>

<select name="cities" id="cities"></select>
<p></p>      
var cityArr = {
	'aus': ['Мельбурн', 'Сидней', 'Аделаида', 'Брисбен', 'Хобарт'],
	'jap': ['Токио', 'Киото', 'Осака', 'Иокогама'],
	'sar': ['Кейптаун', 'Йоханесбург'],
 }

var prime_select = document.getElementById('country');
prime_select.addEventListener('change', func);
prime_select.addEventListener('change', toParagraph);

var city_select = document.getElementById('cities');
city_select.addEventListener('change', toParagraph);

function func(){
	city_select.innerHTML = '';
	var selected_country = prime_select.value;
	for (var i = 0; i < cityArr[selected_country].length; i++) {
		var new_option = document.createElement('option');
		new_option.innerHTML = cityArr[selected_country][i];
		city_select.appendChild(new_option);
	}
}

var parag = document.querySelector('p');
function toParagraph() {
	parag.innerHTML = '';
	parag.innerHTML = prime_select.options[prime_select.selectedIndex].text + ','
	+city_select.options[city_select.selectedIndex].text;
 }

Сделайте селекты день, мес, год. Сделайте так, чтобы не корректную дату нельзя было выбрать (например, 30 февраля нельзя, а 30 марта можно или 29 февраля можно, но только в високосный год).

Решение:

<div id="calendar">
	<select id="month">
		<option value="0">Январь</option>
		<option value="1">Февраль</option>
		<option value="2">Март</option>
		<option value="3">Апрель</option>
		<option value="4">Май</option>
		<option value="5">Июнь</option>
		<option value="6">Июль</option>
		<option value="7">Август</option>
		<option value="8">Сентябрь</option>
		<option value="9">Октябрь</option>
		<option value="10">Ноябрь</option>
		<option value="11">Декабрь</option>
	</select>
	<select id="year"></select>
	<select id="date"></select>
</div>   
var yr;
function Calendar(year, month) {
	var Dlast = 32 - new Date(year,month, 32).getDate(),
	D = new Date(year,month,Dlast),
	gen = function(item, id) {

		for (var i = item; i >= 0; i--) {
			option = document.createElement('option');
			document.createElement('option');
			option.textContent = i;
			id.appendChild(option);
    		}
 	},
	m = document.querySelector('option[value="' + month + '"]'), option;
	if (document.querySelector('#year').length == 0) {
		gen(D.getFullYear(), y);
 	}

	date.innerHTML='';
	gen(Dlast, date);
	m.selected = true;	yr = year;

	Calendar(new Date().getFullYear(),new Date().getMonth())
	calendar.addEventListener('change', function(event) {
		var target = event.target;
		while (target != calendar) {
			if (target.tagName == 'SELECT') {
				switch(target.getAttribute('id')) {
				case('month'):
				Calendar(yr, target.value)
				break;
				case('y'):
				Calendar(target.value,0)
				break;
   			}
			return;
  		}
		target = target.parentNode;
   	}
} 

Реализуйте калькулятор валют. Есть два селекта - селект с исходной валюты, селект с той валютой, в которую мы хотим перевести деньги, инпут, в который вводится сумма для обмена. Курсы валют храните в массиве. Сделайте так, чтобы в селектах нельзя было выбрать две одинаковых валюты.

Решение:

Купить:

<select name="first_curr" id="first_curr">
	<option value="rur">Рубль</option>
	<option value="usd">Доллар</option>
	<option value="eur">Евро</option>
</select>

за:

<select name="first_curr" id="first_curr">
	<option value="rur">Рубль</option>
	<option value="usd">Доллар</option>
	<option value="eur">Евро</option>
</select>

<label for="num">Купить сумму:</label><input type="text" id="num">
<p>Стоимость: <b id="result"></b></p>         
var rates = {'rur':1.00, 'usd':58.50, 'eur':62.15};
var first_curr = document.getElementById('first_curr');
var second_curr = document.getElementById('second_curr');
var num = document.getElementById('num');
var result = document.getElementById('result');
var answer = 0;

first_curr.addEventListener('change', func);
second_curr.addEventListener('change', func);
num.addEventListener('keyup', func);

function func() {
	if (first_curr.value != second_curr.value) {
		result.innerHTML = '';
		answer = rates[first_curr.value] / rates[second_curr.value] * num.value;
		result.innerHTML = answer;
	} else{
		alert('Выберите другую валюту!');
	}
}

Реализуйте генератор таблиц, ширина и высота таблиц задается в двух инпутах (например, таблица 5 на 10 ячеек).

Решение:

<div>
	<input type="text" id="rows_num"><label for="rows_num">№ Ряда</label>
	<input type="text" id="cols_num"><label for="cols_num">№ Колонки</label>
	<button>Генерировать</button>
</div>                   
var rows_num = document.getElementById('rows_num');
var cols_num = document.getElementById('cols_num');
var div = document.querySelector('div');
var btn = document.querySelector('button');
btn.addEventListener('click', toGenerate);

function toGenerate() {
	var tab = document.querySelector('table');
	if (tab != undefined){
		tab.innerHTML = '';
	} else {
		tab = document.createElement('table');
		div.appendChild(tab);
	}

	for (var i = 0; i < rows_num.value; i++) {
		var row = document.createElement('tr');
		tab.appendChild(row);
	}

	var rowsAll = document.getElementsByTagName('tr');
	for (var i = 0; i < rowsAll.length; i++) {
		for (var k = 0; k < cols_num.value; k++) {
			var cell = document.createElement('td');
			rowsAll[i].appendChild(cell);
		}
	}
}

Дан список и кнопка. По нажатию на кнопку посортируйте пункты списка по возрастанию.

Решение:

<ul>
	<li>2</li>
	<li>-20</li>
	<li>-10</li>
	<li>12</li>
	<li>20</li>
</ul>

<button>Сортировать</button>
var btn = document.querySelector('button');
btn.addEventListener('click', toSort);

function toSort() {
	var items = document.querySelectorAll('li');
	var itemsArr = [];
	for (var i = 0; i < items.length; i++) {
		itemsArr[i] = items[i].innerHTML;
	}

	itemsArr.sort(function(a,b){return a-b});
	for (var i = 0; i < items.length; i++){
		items[i].innerHTML = itemsArr[i];
	}
}   

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

Решение:

<a href="#">Текст ссылки 1</a>
<a href="#">Текст ссылки 2</a>
<a href="#">Текст ссылки 3</a>
<a href="#">Текст ссылки 4</a>
<p></p>
var parag = document.querySelector('p');
var links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
	links[i].addEventListener('click', func);
}

function func() {
	for (var j = 0; j < links.length; j++){
		links[j].style.background = '';
	}
	this.style.background = 'red';
	parag.innerHTML = this.innerHTML;
}