I've been trying to implement a difficulty filter based on checked checkboxes, but despite my ongoing search for solutions, I haven't been able to find any promising results or clear directions.
Exploration
I came across a code snippet that seems to be effective, but it's designed for jQuery and using this doesn't seem to work in pure JS. I also found an example using
for ( i = 0; i < difficultyFi.length; i++ )My experience with JavaScript is mostly limited to jQuery, making it challenging to achieve a similar outcome using plain JS.
Outcome
The approach involves locating all elements with the class .difficultyFi, extracting their values to create an array named availableDifficulty, identifying which checkboxes are :checked, and then adding their values to another array called activeDifficulty.
Final Thoughts
Once this process is implemented successfully, my plan is to use the activeDifficulty array to filter my main JSON data set. This task will definitely be tackled in the future!
If anyone could provide assistance, it would be greatly appreciated!
// Filter difficulty
var availableDifficulty = [];
var activeDifficulty = [];
var difficultyFi = document.querySelectorAll('.difficultyFi');
console.log( difficultyFi );
difficultyFi.forEach( function() {
var difVal = this.value();
availableDifficulty.push( difVal );
console.log( difVal );
if ( this.hasAttribute( 'checked' ) ) {
activeDifficulty.push( difVal );
console.log( difVal );
}
});