JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div id="body">
    <select id="filterA" class="filter" name="states">
        <option value="filterACT">Connecticut</option>
        <option value = "filterAMA">Mass</option>
    </select>
    <select id="filterB" class="filter" name="towns">
        <option value="filterBBT">Big Town</option>
        <option value = "filterBST">Small Town</option>
    </select>
    <div id="grid">
        <div class="row filterACT filterBBT">BigTown CT 1</div>
        <div class="row filterACT filterBBT">BigTown CT 2</div>
        <div class="row filterACT filterBST">SmallTown CT 1</div>
        <div class="row filterACT filterBST">SmallTown CT 2</div>
        <div class="row filterAMA filterBBT">BigTown MA 1</div>
        <div class="row filterAMA filterBBT">BigTown MA 2</div>
        <div class="row filterAMA filterBST">SmallTown MA 1</div>
        <div class="row filterAMA filterBST">SmallTown MA 2</div>
    </div>
</div>
</br>
<hr/>
<div>LOG</div>
<hr/>
<div id="log">
    
</div>

JavaScript

debugger;

var elements = document.getElementsByClassName('filter');

writeToLog("Filter elements found: " + elements.length);

for(var e = 0;e < elements.length;e++)
{
    elements[e].onchange =function() {   
        writeToLog('Filter event fired for id:'+this.id);
        filterChange();
    };
}

function filterChange() {
    var filterClasses = [];
    for(var i = 0;i<elements.length;i++) {
        writeToLog('Pushing ('+elements[i].value+') into filter class variable.');
        filterClasses.push(elements[i].value);        
    }
    writeToLog('Filter classes: ' + filterClasses);
    var rows = document.getElementsByClassName('row')
    writeToLog('Row count: ' + rows.length);
    for(var j = 0;j<rows.length;j++)
    {
        writeToLog('Checking row: ' + rows[j].className);
        var rowIsHidden = false;
        for(var k = 0;k<filterClasses.length;k++)
        {
            writeToLog('Checking for class: ' + filterClasses[k]);
            if(rows[j].className.indexOf(filterClasses[k]) < 0)
            {
                writeToLog('Class not found, hide this row.');
                rowIsHidden = true; 
                break;
            }
        }
        writeToLog('Row is hidden: ' + rowIsHidden);
        rows[j].style.display = rowIsHidden ? 'none' : 'block';
        
    }
}

function writeToLog(message) {
    var log = document.getElementById('log');
    
    log.innerHTML += '</br>'+message;
}