Почему-то через цикл css-свойство grid-area устанавливается несколько раз и оно получается равно: grid-area: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1; (и так с каждым элементом из цикла)
А мне нужно. чтобы grid-area = sales_twin_1;
В чём проблема, как это исправить?
Вот мой скрипт:
const tableArticlesClones = document.querySelectorAll('.twin');
tableArticlesClones.forEach((item, index) => {
const dataId = item.getAttribute('data-id');
item.style.gridArea = dataId;
console.log('item.style.gridArea:');
console.log(item.style.gridArea); //Пишет: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1.
//т.е. он выдаёт: dataId / dataId / dataId / dataId
//а мне нужно, чтобы gridArea = sales_twin_1, т.е. gridArea = dataId (и так с каждым dataId)
});
Я решил эту проблему:
Просто нужно устанавливать в JS значение для grid-area через атрибут style.
item.setAttribute('style', `grid-area: ${dataId}`)