Hi, I want to track what filters people use on this page: Werken bij Aeres.
How to combine the search parameters into one item so that i can use them in the internal search keyword report?
Hope you can help. Thank you!
Create javascript to loop over the following class block to filter the element of filter-tag
<div class="active-options-bar"><div class="filter-tags"><div class="filter-tag"><span class="label">Aeres VMBO</span><input id="0" name="0" type="checkbox"><label for="0"><span class="label">Aeres VMBO</span><span class="check"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.859px" height="11.72px" viewBox="0 0 11.859 11.72" enable-background="new 0 0 11.859 11.72" xml:space="preserve"><path id="_x34_rhxa" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1,1
l9.721,9.72"></path><path id="_x34_rhxb" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1.14,10.719
L10.859,1"></path></svg></span></label></div><div class="filter-tag"><span class="label">Management / Leidinggevend</span><input id="1" name="1" type="checkbox"><label for="1"><span class="label">Management / Leidinggevend</span><span class="check"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.859px" height="11.72px" viewBox="0 0 11.859 11.72" enable-background="new 0 0 11.859 11.72" xml:space="preserve"><path id="_x34_rhxa" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1,1
l9.721,9.72"></path><path id="_x34_rhxb" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1.14,10.719
L10.859,1"></path></svg></span></label></div><div class="filter-tag"><span class="label">Nijkerk</span><input id="2" name="2" type="checkbox"><label for="2"><span class="label">Nijkerk</span><span class="check"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.859px" height="11.72px" viewBox="0 0 11.859 11.72" enable-background="new 0 0 11.859 11.72" xml:space="preserve"><path id="_x34_rhxa" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1,1
l9.721,9.72"></path><path id="_x34_rhxb" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1.14,10.719
L10.859,1"></path></svg></span></label></div><div class="filter-tag"><span class="label">Onderwijsgevend</span><input id="3" name="3" type="checkbox"><label for="3"><span class="label">Onderwijsgevend</span><span class="check"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.859px" height="11.72px" viewBox="0 0 11.859 11.72" enable-background="new 0 0 11.859 11.72" xml:space="preserve"><path id="_x34_rhxa" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1,1
l9.721,9.72"></path><path id="_x34_rhxb" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1.14,10.719
L10.859,1"></path></svg></span></label></div><div class="filter-tag"><span class="label">Aeres Farms</span><input id="4" name="4" type="checkbox"><label for="4"><span class="label">Aeres Farms</span><span class="check"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.859px" height="11.72px" viewBox="0 0 11.859 11.72" enable-background="new 0 0 11.859 11.72" xml:space="preserve"><path id="_x34_rhxa" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1,1
l9.721,9.72"></path><path id="_x34_rhxb" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1.14,10.719
L10.859,1"></path></svg></span></label></div><div class="filter-tag"><span class="label">Aeres Tech Productions</span><input id="5" name="5" type="checkbox"><label for="5"><span class="label">Aeres Tech Productions</span><span class="check"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.859px" height="11.72px" viewBox="0 0 11.859 11.72" enable-background="new 0 0 11.859 11.72" xml:space="preserve"><path id="_x34_rhxa" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1,1
l9.721,9.72"></path><path id="_x34_rhxb" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="50" d="M1.14,10.719
L10.859,1"></path></svg></span></label></div><button class="btn">
Reset filters
</button></div></div>
Here’s an example JavaScript code to loop over the filter-tag elements in the given HTML code and filter the ones with an active checkbox:
// Get all filter-tag elements const filterTags = document.querySelectorAll('.filter-tag'); // Loop over each filter-tag element filterTags.forEach(filterTag => { // Get the checkbox element inside the filter-tag const checkbox = filterTag.querySelector('input[type="checkbox"]'); // Check if the checkbox is checked if (checkbox.checked) { // Filter the element with active checkbox const label = filterTag.querySelector('.label').textContent; console.log(label); } });
This code first gets all the filter-tag elements using querySelectorAll(). Then, it loops over each filter-tag element and gets the checkbox element inside it using querySelector(). It checks if the checkbox is checked using the checked property. If it is, it gets the label text content using querySelector() and textContent, and logs it to the console.
