title: Problem filtering elements with select fields in JS
body: <p>I'm working on a sort of picture management app, and I have a section with a feature for filtering pictures. I have 3 input fields: 2 select boxes (one for selecting location, another for selecting event), and a date picker. I have wrapped the pictures in <code>Photo()</code> objects which include the picture's path, date, event, and location.</p>
  <p>The way how I would like it to work is: if you select a location, all the pictures with that location would show up on the preview, but if you also select an event, then all the pictures with that location and event (simultaneously) would show up on the preview, and in the same way, if you then select a date, all the pictures with that date, event and location (simultaneously) would be selected.</p>
  <p>Here's my HTML for this part:</p>
  <pre><code>&lt;div id=&quot;newAlbumExtraDetails&quot;&gt; 
      &lt;a&gt;Filter:&lt;/a&gt;
      &lt;select id=&quot;newAlbumLocation&quot; onchange=&quot;previewUpdater('subsequent')&quot;&gt;
          &lt;option value=&quot;&quot; disabled selected hidden&gt;Localization...&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id=&quot;newAlbumEvent&quot; onchange=&quot;previewUpdater('subsequent')&quot;&gt;
          &lt;option value=&quot;&quot; disabled selected hidden&gt;Event...&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type=&quot;date&quot; id=&quot;newAlbumDate&quot; name=&quot;newAlbumDate&quot; onchange=&quot;previewUpdater('subsequent')&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;formButton&quot;  id=&quot;saveAlbumButton&quot; onclick=&quot;saveAlbum()&quot;&gt;Save Album&lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;formButton&quot;  id=&quot;discardAlbumButton&quot; onclick=&quot;goBack()&quot;&gt;Discard Album&lt;/button&gt;    
  &lt;/div&gt;
  </code></pre>
  <p>And part of my JS for the <code>previewUpdater()</code> function:</p>
  <pre><code>function previewUpdater(scope){
  
      let counter = document.querySelector(&quot;#previewPhotoCounter&quot;)
      let previewBox = document.querySelector(&quot;#photosPreview&quot;)
      let locationSelector = document.querySelector(&quot;#newAlbumLocation&quot;)
      let eventSelector = document.querySelector(&quot;#newAlbumEvent&quot;)
      let dateSelector = document.querySelector(&quot;#newAlbumDate&quot;)
      
      counter.innerHTML = currentPhotos.length
  
  
      // This &quot;initial&quot; part of the function is used to fill the preview box with
      // all the pictures when this filtering area is first visited, it's not very
      // relevant regarding the question.
  
      if (scope == &quot;initial&quot;) {
  
          fillOptions()
          for (let i = 0; i &lt; currentPhotos.length; i++) {
              let newDiv = document.createElement(&quot;div&quot;)
              let newImg = document.createElement(&quot;img&quot;)
      
              newImg.setAttribute(&quot;src&quot;, currentPhotos[i].path);
      
              newImg.addEventListener(&quot;click&quot;, openPhotoViewer)
      
              newDiv.appendChild(newImg)
      
              previewBox.appendChild(newDiv)
          
          }
      }
  
          // Here starts the part of the function regarding filtering
      if (scope==&quot;subsequent&quot;) {
              // Remove photos that were already there
  
              while (previewBox.lastElementChild) {
                  previewBox.removeChild(previewBox.lastElementChild);
              }
  
              // Getting data from the select fields and date picker
              let selectedLocation = locationSelector.options[locationSelector.selectedIndex].text;
              let selectedEvent = eventSelector.options[eventSelector.selectedIndex].text;
              let selectedDate = dateSelector.value
  
              for (let i = 0; i &lt; currentPhotos.length; i++) {
                  let newDiv = document.createElement(&quot;div&quot;)
                  let newImg = document.createElement(&quot;img&quot;)
             
                  // This is currently doing nothing, it's just my way of knowing if the select fields
                  // and date picker have been selected or are in their default values:
                  if (selectedLocation != &quot;Localization...&quot; || selectedEvent != &quot;Event...&quot; || selectedDate != &quot;&quot; ) {
                      console.log(&quot;selected!&quot;)
                  }
                  
                  // This, for example, checks if the current photo has the same date as the selected date
                  console.log(selectedDate==currentPhotos[i].date)
                  
                  // From here on it's simply adding the pictures to the preview box
                  newImg.setAttribute(&quot;src&quot;, currentPhotos[i].path);
                  newImg.addEventListener(&quot;click&quot;, openPhotoViewer)
          
                  newDiv.appendChild(newImg)
          
                  previewBox.appendChild(newDiv)
              
              }
  }
  </code></pre>
  <p>I can only think of ways to show either all pictures that have that location or event or date, or all pictures that have that location AND all pictures that have that event AND all pictures that have that date (repeatedly).</p>
  <p>Thanks in advance, I've been looking at this for hours and finally admitted defeat.</p>