I am trying to make a "filter by" selection, using dropdown button.
Whenever the user clicks on a specific type of item (like clothes in my example), the html would show up only the items that match the criteria (only clothes). I could manage to select the items that I wanted and put in an array, however, when I try to replace the div with the new array the output is [object HTML Element]
.
Funny thing is if I console.log
the array with a specific value, (array[0])
it shows the html code that I need.
<div class="dropdown-menu" >
<a class="dropdown-item" onClick="filter('clothes')" >Clothes</a>
<a class="dropdown-item" onClick="filter('electronics')" >Electronics</a>
</div>
<div id="testSearch">
<section name="product">
<img value="clothes" src="./some.jpg" alt="Clothes 01">
<h5>Electronic</h5>
</section>
<section name="product">
<img value="electronics" src="./some2.jpg" alt="Electronics 01">
<h5>Electronic</h5>
</section>
</div>
<!-- My code has different sections with a variety of value/h5 -->
<script>
function filter(x) {
var arraySearch = [];
var input = document.getElementsByName('product');
for (i=0; i < input.length; i++) {
if(input[i].innerHTML.indexOf(x) > 0 ) {
arraySearch[i]= input[i];
result = result + arraySearch[i];
}
}
document.getElementById('testSearch').innerHTML = result;
<!-- my html display only [object HTMLElement], if more than a section matches, then it displays the [object HTMLElement] times the number of sections matched -->
}
</script>
I expect the output of [object HTMLElement] to be the sections that match the criteria.
I have done it! Pretty much what I needed was the .outerHTML
when passing the array to the var result.
Here is the working code:
<div class="dropdown-menu" >
<a class="dropdown-item" onClick="filter('clothes')" >Clothes</a>
<a class="dropdown-item" onClick="filter('electronics')" >Electronics</a>
</div>
<div id="testSearch">
<section name="product">
<img value="clothes" src="./some.jpg" alt="Clothes 01">
<h5>Electronic</h5>
</section>
<section name="product">
<img value="electronics" src="./some2.jpg" alt="Electronics 01">
<h5>Electronic</h5>
</section>
</div>
<!-- My code has different sections with a variety of value/h5 -->
<script>
function filter(x) {
var arraySearch = [];
var input = document.getElementsByName('product');
var result = " ";
for (i=0; i < input.length; i++) {
if(input[i].innerHTML.indexOf(x) > 0 ) {
arraySearch[i]= input[i];
result = result + arraySearch[i].outerHTML;
}
}
document.getElementById('testSearch').innerHTML = result;
}
</script>
That is it. Hope it helps someone.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.