Как разъединить массивы, которые уже были объединены, или сделать это по другому
Есть массивы, которые объединяются при выборе в селекте. Скрипт работает, но при выборе другого оптионс, массив просто добавляет элементы а не обнуляется и запускается по новой. Пробывал несколько вариантов, оставил их в коде arrr2 = []; Как можно это реализовать. Ну и если кто то добрый, оптимизировать этот код, так как он получается слишком огромным
function maxa1() {
let div13, img3, a3, div23;
let arretikavikl = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arretikasilros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arretikatvros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arretikatelros= [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arretikauprotp = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arretikafuncip = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaclassvikl = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaclasssilros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaclasstvros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaclasstelros= [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaclassuprotp = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaclassfuncip = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenalifevikl = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenalifesilros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenalifetvros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenalifetelros= [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenalifeuprotp = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenalifefuncip = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaallurevikl = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaalluresilros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaalluretvros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaalluretelros= [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaallureuprotp = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrvalenaallurefuncip = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrcelianevikl = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrcelianesilros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrcelianetvros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrcelianetelros= [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrcelianeuprotp = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arrcelianefuncip = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
],
arralletikamas = [ ],
arrallvalenaclassmas = [ ],
arrallvalenalifemas = [ ],
arrallvalenaalluremas = [ ],
arrallcelianemas = [ ],
arrallviklmas = [ ],
arrallsilrosmas = [ ],
arralltvrosmas = [ ],
arralltelrosmas = [ ],
arralluprotpmas = [ ],
arrallfuncipmas = [ ],
arrallmexmas = [ ],
arralletika = arralletikamas.concat(arretikavikl,arretikasilros, arretikatvros, arretikatelros, arretikauprotp, arretikafuncip);
arrallvalenaclass = arrallvalenaclassmas.concat(arrvalenaclassvikl,arrvalenaclasssilros, arrvalenaclasstvros, arrvalenaclasstelros, arrvalenaclassuprotp, arrvalenaclassfuncip);
arrallvalenalife = arrallvalenalifemas.concat(arrvalenalifevikl,arrvalenalifesilros, arrvalenalifetvros, arrvalenalifetelros, arrvalenalifeuprotp, arrvalenalifefuncip);
arrallvalenaallure = arrallvalenaalluremas.concat(arrvalenaallurevikl,arrvalenaalluresilros, arrvalenaalluretvros, arrvalenaalluretelros, arrvalenaallureuprotp, arrvalenaallurefuncip);
arrallceliane = arrallcelianemas.concat(arrcelianevikl,arrcelianesilros, arrcelianetvros, arrcelianetelros, arrcelianeuprotp, arrcelianefuncip);
arrallvikl = arrallviklmas.concat(arretikavikl, arrvalenaclassvikl, arrvalenalifevikl, arrvalenaallurevikl, arrcelianevikl);
arrallsilros = arrallsilrosmas.concat(arretikasilros, arrvalenaclasssilros, arrvalenalifesilros, arrvalenaalluresilros, arrcelianesilros);
arralltvros = arralltvrosmas.concat(arretikatvros, arrvalenaclasstvros, arrvalenalifetvros, arrvalenaalluretvros, arrcelianetvros);
arralltelros = arralltelrosmas.concat(arretikatelros, arrvalenaclasstelros, arrvalenalifetelros, arrvalenaalluretelros, arrcelianetelros);
arralluprotp = arralluprotpmas.concat(arretikauprotp, arrvalenaclassuprotp, arrvalenalifeuprotp, arrvalenaallureuprotp, arrcelianeuprotp);
arrallfuncip = arrallfuncipmas.concat(arretikafuncip, arrvalenaclassfuncip, arrvalenalifefuncip, arrvalenaallurefuncip, arrcelianefuncip);
arrallmex = arrallmexmas.concat(arrallvikl, arrallsilros, arralltvros, arralltelros, arralluprotp, arrallfuncip);
content_el3 = document.querySelector(".ere3")
if (document.getElementById("display_avatar2").value =='allleg') {
if (document.getElementById("display_avatar6").value =='allmax') {
arrallmex = []; return arrr2 = arrallmex;
}
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = []; arrr2 = arrallvikl;
}
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrallsilros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arralltvros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arralltelros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arralluprotp;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrallfuncip;arrr2 = [];
}
}
else if (document.getElementById("display_avatar2").value =='etika') {
if (document.getElementById("display_avatar6").value =='allmax') {
arralletika = []; arrr2 = arralletika;
}
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arretikavikl;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arretikasilros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arretikatvros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value == 'telros') {
arrr2 = arretikatelros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arretikauprotp;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arretikafuncip;arrr2 = [];
}
}
else if (document.getElementById("display_avatar2").value == 'valenaclass') {
if (document.getElementById("display_avatar6").value == 'allmax') {
return arrr2 = []; arrr2 = arrallvalenaclass;
}
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrvalenaclassvikl;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrvalenaclasssilros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrvalenaclasstvros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrvalenaclasstelros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrvalenaclassuprotp;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrvalenaclassfuncip;arrr2 = [];
}
}
else if (document.getElementById("display_avatar2").value =='valenalife') {
if (document.getElementById("display_avatar6").value =='allmax') {
arrr2 = arrallvalenalife;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrvalenalifevikl;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrvalenalifesilros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrvalenalifetvros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrvalenalifetelros;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrvalenalifeuprotp;arrr2 = [];
}
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrvalenalifefuncip;arrr2 = [];
}
}
else if (document.getElementById("display_avatar2").value =='valenaallure') {
if (document.getElementById("display_avatar6").value =='allmax') {
arrr2 = arrallvalenaallure;
}
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrvalenaallurevikl;
}
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrvalenaalluresilros;
}
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrvalenaalluretvros;
}
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrvalenaalluretelros;
}
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrvalenaallureuprotp;
}
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrvalenaallurefuncip;
}
}
else if (document.getElementById("display_avatar2").value == 'celiane') {
if (document.getElementById("display_avatar6").value =='allmax') {
arrr2 = arrallceliane;
}
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrcelianevikl;
}
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrcelianesilros;
}
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrcelianetvros;
}
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrcelianetelros;
}
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrcelianeuprotp;
}
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrcelianefuncip;
}
}
arrr2.forEach((attrs3) => {
// создание элемента
div13 = document.createElement("div");
div23 = document.createElement("div");
a3 = document.createElement("a");
img3 = document.createElement("img");
// добавление классов
div13.classList.add("varic2");
img3.classList.add("notact2");
// установка атрибутов и текста
a3.href = attrs3[0];
img3.src = attrs3[1];
div23.innerText = attrs3[2];
// внутрь элемента a добавить элемент img
a3.appendChild(img3);
// внутрь элемента div добавить элемент a
div13.appendChild(a3);
div13.appendChild(div23);
// внутрь элемента body добавить элемент div
content_el3.appendChild(div13)
});
}
<select class="select-css" name="display_avatar2" id="display_avatar2" style="display: block" onchange="maxa1(this)">
<option value="allleg" selected >Все коллекции</option>
<option value="etika" >Etika</option>
<option value="valenaclass" >Valena Classic</option>
<option value="valenalife" >Valena Life</option>
<option value="valenaallure" >Valena Allure</option>
<option value="celiane" >Celiane</option>
</select>
<select class="select-css" name="display_avatar6" id="display_avatar6" style="display: block" >
<option value="allmax" checked onclick="l_image2 ();">Все механизмы</option>
<option value="vikl" onclick="l_image2 ();">Выключатели и переключатели</option>
<option value="silros" onclick="l_image2 ();">Силовые розетки</option>
<option value="tvros" onclick="l_image2 ();">TV-аудио-видео розетки</option>
<option value="telros" onclick="l_image2 ();">Телефонные и информационные розетки</option>
<option value="uprotp" onclick="l_image2 ();">Управление отоплением</option>
<option value="funcip" onclick="l_image2 ();">Функция IP44</option>
</select>
<div class="ere3"></div>
Ответы (2 шт):
У вас данные изначально неверно организованы. Вы зачем-то часть данных (категории) засунули в имена переменных. А что будет, когда у вас будет не 2 селекта, а 8? И в каждом по 10 вариантов? Вы 80 массивов с разными названиями сделаете? Ifы будете писать 8ьми вложенные? Гораздо проще сделать один массив, в котором будут указаны категории и фильтровать уже его по этим полям. Выглядеть это должно примерно так:
function maxa1() {
const arr = [
// Категория 1, категория 2, href, src, text
["etika", "vikl", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "vikl", "javascript:l_image5('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "vikl", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "vikl", "javascript:l_image5('images/m2')", "images/m1.png", "Антрацит"],
["celiane", "vikl", "javascript:l_image5('images/m2')", "images/m2.png", "Белый"],
["oops", "vikl", "javascript:l_image5('images/m1')", "images/m1.png", "Антрацит"],
["etika", "silros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "tvros", "javascript:l_image5('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "telros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "uprotp", "javascript:l_image5('images/m2')", "images/m1.png", "Антрацит"],
["celiane", "funcip", "javascript:l_image5('images/m2')", "images/m2.png", "Белый"],
["oops", "tvros", "javascript:l_image5('images/m1')", "images/m1.png", "Антрацит"],
["etika", "silros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "uprotp", "javascript:l_image5('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "telros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "tvros", "javascript:l_image5('images/m2')", "images/m1.png", "Антрацит"],
["celiane", "vikl", "javascript:l_image5('images/m2')", "images/m2.png", "Белый"],
["oops", "silros", "javascript:l_image5('images/m1')", "images/m1.png", "Антрацит"],
];
const collectValue = document.getElementById("display_avatar2").value;
const mechTypeValue = document.getElementById("display_avatar6").value;
const content_el3 = document.querySelector(".ere3");
content_el3.innerHTML = arr
.filter(([collect, mechtype]) => {
return (collectValue == "allleg" || collectValue == collect)
&& (mechTypeValue == "allmax" || mechTypeValue == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
}
<select class="select-css" name="display_avatar2" id="display_avatar2" style="display: block" onchange="maxa1()">
<option value="allleg" selected >Все коллекции</option>
<option value="etika" >Etika</option>
<option value="valenaclass" >Valena Classic</option>
<option value="valenalife" >Valena Life</option>
<option value="valenaallure" >Valena Allure</option>
<option value="celiane" >Celiane</option>
</select>
<select class="select-css" name="display_avatar6" id="display_avatar6" style="display: block" onchange="maxa1()">
<option value="allmax" checked onclick="l_image2 ();">Все механизмы</option>
<option value="vikl" onclick="l_image2 ();">Выключатели и переключатели</option>
<option value="silros" onclick="l_image2 ();">Силовые розетки</option>
<option value="tvros" onclick="l_image2 ();">TV-аудио-видео розетки</option>
<option value="telros" onclick="l_image2 ();">Телефонные и информационные розетки</option>
<option value="uprotp" onclick="l_image2 ();">Управление отоплением</option>
<option value="funcip" onclick="l_image2 ();">Функция IP44</option>
</select>
<div class="ere3"></div>
const arr = [
// Категория 1, категория 2, href, src, text
["etika", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "vikl", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "vikl", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "tvros", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "uprotp", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
["celiane", "funcip", jsimg + "('images/m2')", "images/m2.png", "Белый"],
["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "uprotp", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "tvros", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
];
const collectValue = document.getElementById("display_avatar2").value;
const mechTypeValue = document.getElementById("display_avatar6").value;
const content_el1 = document.querySelector(".ere");
const content_el2 = document.querySelector(".ere2");
const content_el3 = document.querySelector(".ere3");
const content_el4 = document.querySelector(".ere4");
const content_el5 = document.querySelector(".ere5");
content_el1.innerHTML = arr
.filter(([collect, mechtype]) => {
return (collectValue == "allleg" || collectValue == collect)
&& (mechTypeValue == "allmax" || mechTypeValue == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el2.innerHTML = arr
.filter(([collect, mechtype]) => {
return (collectValue == "allleg" || collectValue == collect)
&& (mechTypeValue == "allmax" || mechTypeValue == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el3.innerHTML = arr
.filter(([collect, mechtype]) => {
return (collectValue == "allleg" || collectValue == collect)
&& (mechTypeValue == "allmax" || mechTypeValue == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el4.innerHTML = arr
.filter(([collect, mechtype]) => {
return (collectValue == "allleg" || collectValue == collect)
&& (mechTypeValue == "allmax" || mechTypeValue == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el5.innerHTML = arr
.filter(([collect, mechtype]) => {
return (collectValue == "allleg" || collectValue == collect)
&& (mechTypeValue == "allmax" || mechTypeValue == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`)
.join("");
const arr2 = [
// Категория 1, категория 2, href, src, text
["etika", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "vikl", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "vikl", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "tvros", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "uprotp", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
["celiane", "funcip", jsimg + "('images/m2')", "images/m2.png", "Белый"],
["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaclass", "uprotp", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
["valenaallure", "tvros", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
];
const collectValue2 = document.getElementById("display_avatar3").value;
const mechTypeValue2 = document.getElementById("display_avatar7").value;
const content_el12 = document.querySelector(".ere");
const content_el22 = document.querySelector(".ere2");
const content_el32 = document.querySelector(".ere3");
const content_el42 = document.querySelector(".ere4");
const content_el52 = document.querySelector(".ere5");
content_el12.innerHTML = arr2
.filter(([collect, mechtype]) => {
return (collectValue2 == "allbit" || collectValue2 == collect)
&& (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el22.innerHTML = arr2
.filter(([collect, mechtype]) => {
return (collectValue2 == "allbit" || collectValue2 == collect)
&& (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el32.innerHTML = arr2
.filter(([collect, mechtype]) => {
return (collectValue2 == "allbit" || collectValue2 == collect)
&& (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el42.innerHTML = arr2
.filter(([collect, mechtype]) => {
return (collectValue2 == "allbit" || collectValue2 == collect)
&& (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`).join("");
content_el52.innerHTML = arr2
.filter(([collect, mechtype]) => {
return (collectValue2 == "allbit" || collectValue2 == collect)
&& (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
})
.map(([collect, mechtype, href, src, text]) => `
<div class="varic2">
<a href="${href}">
<img class="notact2" src="${src}" />
</a>
<div>${text}</div>
</div>
`)
.join("");
Когда всего один массив все работает, но если добавить второй как в коде, не работает. Ну и как то это оптимизировать, сам я не понимаю как.