Hey everyone. I'm trying to write some code that changes the brightness of an element based on how far away it is from the current item. Everything runs according to plan, however, as it moves down the list all of the items before the current item begin to return "NaN" as their value. This makes sense, as the "currentItemIndex" variable is only given a value once it finds the current item's position, so there's no value for the "currentItemIndex" until it reaches the current item within the list.
I've tried declaring the "currentItemIndex" variable before it searches for the current item, giving it either a value of 0 to start or an empty string. The starting value of 0 results in the "currentItemIndex" staying at 0 no matter what, and the empty string just produces the same result as when there was no variable declared there in the first place.
I'm not sure how to get the "currentItemIndex" before searching for the current item and not have it affect the variable when it checks for the current item. Is anyone able to help me out?
JavaScript:
var items = document.getElementsByClassName('item'); // Gets all of the items
for (i = 0; i < items.length; i++) { // For each of the items, this:
var itemClass = items[i].classList // Get class of the item
if (itemClass.contains('current-item')) { // If it is the current item, this:
var currentItemIndex = i; // Set the current item's position to the target's position
}
var brightness = (100 + (Math.abs(currentItemIndex - i) * 50)); // Calculate how much the brightness should change based on the target's distance from the current item
items[i].style.filter = 'brightness(' + brightness + '%)'; // Apply that brightness to the target
}
You'll need to find the currentItemIndex first, then do the loop setting the brightness:
const items = document.getElementsByClassName("item"); // Gets all of the items
let currentItemIndex;
for (let i = 0; i < items.length; i++) { // For each of the items, this:
const itemClass = items[i].classList // Get class of the item
if (itemClass.contains("current-item")) { // If it is the current item, this:
currentItemIndex = i; // Set the current item"s position to the target"s position
break;
}
}
for (let i = 0; i < items.length; i++) { // For each of the items, this:
const brightness = (100 + (Math.abs(currentItemIndex - i) * 50)); // Calculate how much the brightness should change based on the target"s distance from the current item
items[i].style.filter = "brightness(" + brightness + "%)"; // Apply that brightness to the target
}
(With more context, it may be that there's a more concise way to find the index of that item [the first for loop], but the above works and it's simple.)
Side note: I added a declaration for i, so the code isn't relying on what I call The Horror of Implicit Globals. I strongly recommend using strict mode, so that's the error it always should have been.
You need to break the problem down into two steps:
// get all of the items as an array
let items = Array.from(document.getElementsByClassName('item'));
// 1. find the index of the current item
let currentItemIndex = items.findIndex(item => items.classList.contains('current-item'));
// 2. calculate and set the brightness for every item
items.forEach((item, i) => {
let brightness = (100 + (Math.abs(currentItemIndex - i) * 50));
item.style.filter = `brightness(${brightness}%)`;
});