Задачи для решения
Урок
Даны 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://, то добавьте ей в конец стрелку → (делается так: →).
Решение:
<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;
}