Помогите пожалуйста. Не знаю даже с чего начать и как.
Какое задание? Ссылку приложите.
Спрашивайте более конкретно. Какие мысли у вас есть? Давайте разбираться.
https://htmlacademy.ru/courses/98/run/27
Ну, может пройтись циклом по всем фишкам и дать номера тем, у которых их нету
Или с помощью функции с обращением к data? Только как это реализовать?
Начнем с начала. Вы видите три функции. В каждой из них в скобках передается параметр (переменная). То есть сначала надо объявить переменную element.
Насколько полно нужно объяснять вам? Есть хоть какие-то начальные знания по JS?
Максимально полно, совсем совсем начальные.
Хорошо. Давайте попробуем объявить переменную. С помощью какого специального слова объявляются переменные в JS?
Если не ошибаюсь, то Var
Думаю, что Var
Только с маленькой буквы. Есть предложение. Чтобы не засорять форум слишком длинным диалогом, можно перейти в вк. А когда разберетесь, что и как нужно сделать, напишете здесь краткую инструкцию для пользователей форума.
Да, хорошо
а как с вами там связаться?
Давайте свои координаты.
Для начала нам надо вспомнить метод для выбора элемента из разметки. Этот метод document.querySelectorAll или просто document.queySelector.
Мы выбираем все li из класса .chips, тогда получается document.querySelectorAll(".chips li");
Не забывайте ";"
Теперь нам надо вспомнить первую функцию в коде. Она должна дописывать номер функции, но на деле это не так. Поэтому нам надо присвоить внутреннему содержимому значение из data-атрибута number. Это можно сделать с помощью innerHTML. Прочитайте про этот метод здесь https://learn.javascript.ru/basic-dom-node-properties . Получается element.innerHTML = element.dataset.number; Это строчку мы дописываем в первую функцию.
Теперь нам надо создать цикл https://learn.javascript.ru/array Прочитайте в этой главе про “Перебор элементов”. Нам надо создать цикл, потому что мы element присвоили .chips li, но в ней 16 li и поэтому нам надо пройтись по всем li. По примеру из главы у нас получается for( var i = 0; i<element.length; i++) {};
Внутри фигурных скобках у нас будет тело цикла. Внутри цикла мы вызываем сначала первую функцию. setNumber- функция вызывается по имени. Теперь в скобках функции нам надо указать переменную, но в ней целых 16 значений, поэтому нам нужен счетчик. Выглядит он так element[i]. Element- это целый массив, элементы массива пишутся в квадратных скобках, чтобы перебрать все элементы массива, мы пишем внутри счетчик “I”. В итоге у нас получается setNumber(element[i]); Теперь по этому примеру вызываем вторую функцию, получается reColor(element[i]); Третью функцию вызывать не надо, так как она выполняется во 2. Вот и все. Постарался объяснить, как смог. Хочу еще раз сказать огромное человеческое спасибо ineska, за то что помогла разобраться в этом непростом задании .На всякий случай прикладываю код, который получился
// Добавление класса элементу, переданному в качестве параметра. Название класса составляется с помощью data-атрибута этого элемента
function setNumber(element) {
element.classList.add(‘color-’ + element.dataset.number);
element.innerHTML = element.dataset.number;
}
// Добавление элементу четырёхцветного фона
function reColor(element) {
var baseColor = getComputedStyle(element).borderTopColor;
var color = baseColor.match(/^rgb\s*(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*)$/i);
element.style.borderTopColor = colorShift(color, 40);
element.style.borderRightColor = colorShift(color, 60);
element.style.borderBottomColor = colorShift(color, 80);
element.style.borderLeftColor = colorShift(color, 20);
}
// Смещение цветового тона
function colorShift(color, shift) {
var rgb = ‘#’;
for (var i = 1; i <= 3; i++) {
var part = parseInt(color[i]) - shift;
part = Math.round(Math.min(Math.max(0, part), 255));
part = part.toString(16);
rgb += (‘00’ + part).substr(part.length);
}
return rgb;
}
var element = document.querySelectorAll(".chips li");
for( var i=0; i< element.length; i++) {
setNumber(element[i]);
reColor(element[i]);
}
8 лайков
А где это видно, что третья функция выполняется внутри второй? Не могу найти связи между ними.
element.style.borderTopColor = colorShift(color, 40);
1 лайк
Всем привет. Подскажите пожалуйста, где можно почитать о расшифровке этого кода? Чтобы понять, что каждый символ означает?
А то пока всё это выглядит как хаотичный набор символов)
Цикл for
Чаще всего применяется цикл for. Выглядит он так:
for (начало; условие; шаг) {
// ... тело цикла ...
}
Пример цикла, который выполняет alert(i) для i от 0 до 2 включительно (до 3):
var i;
for (i = 0; i < 3; i++) {
alert( i );
}
Здесь:
Начало: i=0.
Условие: i<3.
Шаг: i++.
Тело: alert(i), т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)
Цикл выполняется так:
Начало: i=0 выполняется один-единственный раз, при заходе в цикл.
Условие: i<3 проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход.
Тело: alert(i).
Шаг: i++ выполняется после тела на каждой итерации, но перед проверкой условия.
Идти на шаг 2.
Иными словами, поток выполнения: начало → (если условие → тело → шаг) → (если условие → тело → шаг) → … и так далее, пока верно условие.
На заметку:
В цикле также можно определить переменную:
for (var i = 0; i < 3; i++) {
alert(i); // 0, 1, 2
}
Эта переменная будет видна и за границами цикла, в частности, после окончания цикла i станет равно 3.
(с)
1 лайк
Классное задание, но честно говоря, начал делать как, то совсем по своему, не знаю, почему так. Вдруг кому будет сложно, можете подглядеть. Но считаю, попытайтесь хотя бы раз 5-10 решить самостоятельно.
MyCode
//var element = document.querySelectorAll(".chips li");
// Добавление класса элементу, переданному в качестве параметра. Название класса составляется с помощью data-атрибута этого элемента
function setNumber(element) {
element.classList.add(‘color-’ + element.dataset.number);
//element.innerHTML = element.dataset.number;
}// Добавление элементу четырёхцветного фона
function reColor(element) {
var baseColor = getComputedStyle(element).borderTopColor;
var color = baseColor.match(/^rgb\s*(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*)$/i);
element.style.borderTopColor = colorShift(color, 40);
element.style.borderRightColor = colorShift(color, 60);
element.style.borderBottomColor = colorShift(color, 80);
element.style.borderLeftColor = colorShift(color, 20);
}// Смещение цветового тона
function colorShift(color, shift) {
var rgb = ‘#’;
for (var i = 1; i <= 3; i++) {
var part = parseInt(color[i]) - shift;
part = Math.round(Math.min(Math.max(0, part), 255));
part = part.toString(16);
rgb += (‘00’ + part).substr(part.length);
}
return rgb;
}/for( var i = 0; i<element.length; i++) {
setNumber(element[i]);
reColor(element[i]);
};/for (var i = 1; i <= 16; i++) {
var control = document.querySelector(’.chips li:nth-child(’+i+’)’);
if (control) {
control.classList.add(‘color-’+i);
control.innerHTML = control.dataset.number;
reColor(control);
}
}