title: How do I return a random value from array based on filtered data?
body: <p>I am trying to create a code that, when a button is pressed, a random value from my array is returned. More specifically, I have already created a code where upon button press, a random link from the array is returned, and the code presents the image. I want to take it a step further and have it so that the array can be filtered by criteria. I have the following array format in js: <code>{site: &quot;(link here, and does not have parenthesis in the actual code)&quot;, series: &quot;1&quot;, type: &quot;SP&quot;, dice: &quot;1&quot;, rps: &quot;S&quot;, species: &quot;N/A&quot;, name: &quot;Isabelle&quot;}</code> with 400+ more lines of the array formatted the same. My HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Card Selector&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;mainimgbg.css&quot;&gt;
  &lt;/head&gt;
  &lt;body class=&quot;light-theme&quot;&gt;
      &lt;h1&gt;amiibo Selector&lt;/h1&gt;
      &lt;p id=&quot;msg&quot;&gt;To Do:&lt;/p&gt;
      &lt;ul&gt;
        &lt;li class=&quot;list&quot;&gt;Add exclusion parameters&lt;/li&gt;
        &lt;li class=&quot;list&quot;&gt;Add sanrio images&lt;/li&gt;
      &lt;/ul&gt;
      &lt;input type=button id=&quot;btnSearch&quot; value=&quot;Select&quot; onclick=&quot;GetValue();&quot; /&gt;
  &lt;div id=&quot;message&quot;&gt;&lt;/div&gt;
      &lt;script src=&quot;gendetailedextra.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;alert(&quot;This site is a work in progress.&quot;)&lt;/script&gt;
      &lt;noscript&gt;You need to enable JavaScript to view the full site.&lt;/noscript&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My js:</p>
  <pre><code>'use strict'
  var myarray= new Array(
      {400 line array formatted as mentioned above},);
  function GetValue()
  {
  
      var random = myarray[Math.floor(Math.random() * myarray.length)];
      //alert(random);
      document.getElementById(&quot;message&quot;).innerHTML='&lt;img src='+random+'&gt;';
  }
  </code></pre>
  <p>I was looking at the code of a name generator, and found an HTML code snippet that seemed useful, but I don't know how to implement it:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  &lt;!--
  function click_usage(box) {
      if ($(box).is(':checked')) {
          if ($(box).attr('id')=='all') {
              $('.usage-cb').prop('checked', false);
          } else {
              $('#all').prop('checked', false);
          }
      }
  }
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  <p>I figure the best way to do this would be some sort of checkboxes, which I can probably google how to format on the HTML end. Additionally, I have run into the issue that because I now have multiple pieces of data in the array other than the links, the code no longer provides me with the image embedded. I am willing to sacrifice this feature if needed.</p>