Product filtering does not work in mobile device browsers

Question

I have a website that contains some products with category. I wrote a code that checks if the category checkboxes are selected and shows only the items corresponding to it.

The code works on your computer’s Google Chrome, but it doesn’t work on mobile browsers.

I changed it for him to paint blue, but in the original code I use Display: block or None;

Example of my code:

function filtrar()
{
var checks = document.getElementsByClassName("ContainerCaim");

var qtdCategoria = document.getElementById("produtos").getElementsByClassName("categoria").length;

var contProduto = document.getElementById("produtos").getElementsByClassName("categoria").length;

for(var x = 0; x < contProduto; x++)
{
  document.getElementById("produtos").getElementsByClassName("categoria")[x].style.color = "black";
}


for(var i = 0;i < checks.length;i++)
  {
  if(checks[i].getElementsByTagName("input")[0].checked)
    {
      
      for(var ii = 0;ii< qtdCategoria; ii++){
      if(document.getElementById("produtos").getElementsByClassName("categoria")[ii].innerText == checks[i].innerText)
      {
          document.getElementById("produtos").getElementsByClassName("categoria")[ii].style.display = "blue";
      }

    }
    }
  }

}

<div id="FiltroCaimentos" style="display: inline-block;margin-top: 50px;">

<label  class="containerCaim">Skinny
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="containerCaim">Straight
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="containerCaim">Slim
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<button onclick="filtrar()">Filtar</button>
<br>
<br>
<br>
<div id="produtos">

  <div class="categoria">Skinny</div>

  <div class="categoria">Straight</div>

  <div class="categoria">Slim</div>
  
</div>

Answer 1

At the time I was creating the question, while testing the sample codes I ended up solving my problem.

Turns out I was using innerText untreated (for example, to remove spaces). In the computer browser, it seems that the names compared did not come with space, and on the mobile had.

I added a .replace(/ s+/g, '') in my comparisons on innerText and worked in both browsers.