I need to add each <span> of a group into an array which contains their specific className – For example: All spans which have className === class-A1 – into the array or object let spansA1: []/{};.
Basically each <span> will need to be added an additional class depending on the class-A${i} (class index-number) it already has – For example: span[0].className === class-A${0} would get the class with: A${0}-Enter.
I actually tried to write such function but got the error: “Not a function” – see in the code.
After that I tried using indexOf() which didn’t work either.
There obviously is a way to create that but I’m not really sure how would a professional programmer would have done it.
In the JS code I did manage to sort all spans of each paragraph into an array – as well as getting their class-names.
But the problem as I said is adding each span a specific class depending on the class-index-number it already has.
You can see in the HTML code that each span inside a paragraph has text which specifies its intended color – as well as its class-name. For example: <span class="color-A2">GREEN TOPIC</span>.
Thank you very much.
const spanBlocks = [...document.getElementsByClassName('highlight')];
console.log(`const 'spanBlocks' equals:`);
console.log(spanBlocks);
console.log('---- ---- ---- ----');
const Colors = [
"color-A0", "color-A1", "color-A2", "color-A3",
"color-A4", "color-A5", "color-A6", "color-A7",
];
const Entries = [
"A0-enter", "A1-enter", "A2-enter", "A3-enter",
"A4-enter", "A5-enter", "A6-enter", "A7-enter",
];
const Leaves = [
"A0-leave", "A1-leave", "A2-leave", "A3-leave",
"A4-leave", "A5-leave", "A6-leave", "A7-leave",
];
for (let i = 0; i < spanBlocks.length; i++) {
const block = [...document.querySelectorAll(`span[id *= block-A${i}] span[class *= color-A]`)];
for (let each of block) {
each.onmouseover = (e) => {
let currentBlock = e.target.parentNode;
let spanGroup = [...currentBlock.querySelectorAll(`span[class *= color-A]`)];
console.log(`const 'spanGroup [${i}]' equals:`);
console.log(spanGroup);
console.log('---- ---- ---- ----');
let spanColors = spanGroup.filter(span => (span.className === `color-A${i}`)); // Thought it'd work for all spans one by one;
console.log(`const 'spanColors' equals:`);
console.log(spanColors);
console.log('---- ---- ---- ----');
for (let a = 0; a < spanGroup.length; a++) {
let spanClassNames = [spanGroup[a].className];
console.log(`const 'spanClassNames [${a}]' equals:`);
console.log(spanClassNames);
console.log('---- ---- ---- ----');
// for (let all of spanClassNames) {
// let spanIndex = all.indexOf(a);
// console.log(`const 'spanIndex [${a}]' equals:`);
// console.log(spanIndex);
// console.log('---- ---- ---- ----');
// };
};
for (let all of spanGroup) {
all.classList.remove(`${Leaves[i]}`);
all.classList.add(`${Entries[i]}`);
};
};
each.onmouseout = () => {
for (let all of block) {
all.classList.remove(`${Entries[i]}`);
all.classList.add(`${Leaves[i]}`);
};
};
};
};
function sortClasses(span) {
for (let i = 0; i < Colors.length; i++) {
if (span.className === Colors[i]) {
span[i].classList.add(`A${i}-enter`);
};
};
}; // Tried to call that as a function but it says: "Is not a function";#container {
cursor: none;
}
/* DIVIDER */
.A0-enter {
animation: A0-enter 0.4s ease 0s 1 normal forwards;
}
@keyframes A0-enter {
0% {
background-color: red;
color: black;
}
100% {
background-color: red;
color: white;
}
}
.A0-leave {
animation: A0-leave 0.4s ease 0s 1 normal forwards;
}
@keyframes A0-leave {
0% {
color: white;
background-color: red;
}
100% {
color: unset;
background-color: unset;
}
}
/* DIVIDER */
.A1-enter {
animation: A1-enter 0.4s ease 0s 1 normal forwards;
}
@keyframes A1-enter {
0% {
background-color: blue;
color: black;
}
100% {
background-color: blue;
color: white;
}
}
.A1-leave {
animation: A1-leave 0.4s ease 0s 1 normal forwards;
}
@keyframes A1-leave {
0% {
color: white;
background-color: blue;
}
100% {
color: unset;
background-color: unset;
}
}
/* DIVIDER */
.A2-enter {
animation: A2-enter 0.4s ease 0s 1 normal forwards;
}
@keyframes A2-enter {
0% {
background-color: green;
color: black;
}
100% {
background-color: green;
color: white;
}
}
.A2-leave {
animation: A2-leave 0.4s ease 0s 1 normal forwards;
}
@keyframes A2-leave {
0% {
color: white;
background-color: green;
}
100% {
color: unset;
background-color: unset;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
padding-top: 10%;
font-size: 40px;
}
</style>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div id="container">
<span id="block-A0" ; class="highlight">
<p>
<span class="color-A0">RED TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A0">RED TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
</p>
</span>
<span id="block-A1" ; class="highlight">
<p>
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A0">RED TOPIC</span>
</p>
</span>
<span id="block-A2" ; class="highlight">
<p>
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A0">RED TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
</p>
</span>
</div>
<script src="a.js"></script>
</body>
</html>