Как задать уникальный цвет для каждого div-элемента на JavaScript?

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с моим проектом заметок-стикеров. Я хочу, чтобы каждая заметка имела свой уникальный цвет. Сейчас, когда я меняю цвет одной заметки, он меняется у всех. Как мне это исправить?

Вот пример кода, который я использую для создания новой заметки:

function создатьЗаметку() {
  const заметка = document.createElement('div');
  заметка.className = 'заметка';

  const выборЦвета = document.createElement('input');
  выборЦвета.type = 'color';
  выборЦвета.onchange = function() {
    заметка.style.backgroundColor = this.value;
  };

  const текст = document.createElement('textarea');

  заметка.appendChild(выборЦвета);
  заметка.appendChild(текст);

  document.body.appendChild(заметка);
}

Как мне модифицировать этот код, чтобы каждая заметка могла иметь свой собственный цвет? Буду благодарен за любую помощь!

2

Чтобы решить проблему, можно использовать замыкание. Вот как это сделать:

function создатьЗаметку() {
const заметка = document.createElement(‘div’);
заметка.className = ‘заметка’;

const выборЦвета = document.createElement(‘input’);
выборЦвета.type = ‘color’;
выборЦвета.onchange = (function(элемент) {
return function() {
элемент.style.backgroundColor = this.value;
};
})(заметка);

// остальной код без изменений

document.body.appendChild(заметка);
}

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

3

А знаете что? Можно еще добавить случайный цвет при создании заметки. Это сделает их сразу разноцветными. Вот пример:

function создатьЗаметку() {
const заметка = document.createElement(‘div’);
заметка.className = ‘заметка’;
заметка.style.backgroundColor = #${Math.floor(Math.random()*16777215).toString(16)};

// остальной код

document.body.appendChild(заметка);
}

Так каждая новая заметка будет иметь свой уникальный цвет изначально. Круто, да?

4

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

function создатьЗаметку() {
const заметка = document.createElement(‘div’);
заметка.className = ‘заметка’;

const выборЦвета = document.createElement(‘input’);
выборЦвета.type = ‘color’;
выборЦвета.onchange = function() {
this.parentNode.style.backgroundColor = this.value;
};

// остальной код без изменений

document.body.appendChild(заметка);
}

суть в том, чтобы использовать this.parentNode вместо заметка. так каждый выбор цвета будет влиять только на родительский элемент, то есть на конкретную заметку. надеюсь, это поможет!