title: How to fix this error "Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector"?
body: <p>I am trying to hide the comments with the children like reddit, and I wrote this function:</p>
  <pre><code>function toggle(id, lft, rgt) {
      var kids = (rgt - lft - 1) / 2;
      if (kids &gt;= 1) {
          var element = document.querySelector(&quot;div.com#com&quot; + id).getAttribute('value');
          var low = Number(element.split('-')[0]);
          var high = Number(element.split('-')[1]);
          for (var i = low + 1; i &lt;= high - 1; i += 1) {
              const x = document.querySelectorAll('div.com[min=' + i + ']');
          }
          Array.from(x).forEach(comment =&gt; {
              if (comment.style.display === &quot;none&quot;) {
                  comment.style.display = &quot;block&quot;;
              } else {
                  comment.style.display = &quot;none&quot;;
              }
          });
      }
  </code></pre>
  <p>for example this is the parent comment:</p>
  <pre><code>&lt;div&gt; 
        &lt;a onclick=&quot;return toggle(1, 1, 4)&quot; href=&quot;javascript:void(0)&quot;&gt;[-]&lt;/a&gt;
         &lt;div id=&quot;com1&quot; class=&quot;com md&quot; value=&quot;1-4&quot; min=&quot;1&quot;&gt;yellow&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>and this is a child comment:</p>
  <pre><code>&lt;div&gt; 
       &lt;a onclick=&quot;return toggle(2, 2, 3)&quot; href=&quot;javascript:void(0)&quot;&gt;[-]&lt;/a&gt;
      &lt;div id=&quot;com2&quot; class=&quot;com md&quot; value=&quot;2-3&quot; min=&quot;2&quot;&gt;hello &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>I want to hide all the comments that have the min attribute between the parent value 1 and 4 and this child have the min=2 so it must be hidden. BUT the js function isn't working, so what's the problem?</p>
  <p><strong>other questions?</strong></p>
  <ul>
  <li>Should I write the <code>foreach</code> inside the <code>for loop</code> or it's fine like
  this way?</li>
  <li>if the error in the title is fixed, will the function work and the child comments will be hidden, if not, why?</li>
  </ul>