title: Using screen-size queries and run script
body: <p>VERY new to javascript... How i have my site set up is using a CSS query to detect screen sizes. If it's greater than 750px wide you get the desktop div. If less, you get the mobile div. The content in these divs are the same exact the styling is different.</p>
  
  <p>I've created a page where the divs reference a block of javascript. What I am finding is I cannot have the same javascript run in both the desktop and mobile divs even though the same script is needed for both. Why can't the desktop and mobile divs handle the same exact javascript?</p>
  
  <pre><code>&lt;div class="background-chart-desktop"&gt;
      &lt;h2&gt;Bra size chart&lt;/h2&gt;
      &lt;p style="color:#fff; "&gt;Show measurements in: &lt;a onclick="divVisibility('Inches');" style="color:#fff;"&gt;Inches&lt;/a&gt; |  &lt;a onclick="divVisibility('Centimeters');" style="color:#fff;"&gt;Centimeters&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
   &lt;div class="background-chart-mobile" &gt;
      &lt;h2&gt;Bra size chart&lt;/h2&gt;
      &lt;p style="color:#fff; "&gt;Show measurements in: &lt;a onclick="divVisibility('Inches');" style="color:#fff;"&gt;Inches&lt;/a&gt; |  &lt;a onclick="divVisibility('Centimeters');" style="color:#fff;"&gt;Centimeters&lt;/a&gt;&lt;/p&gt;        
  &lt;/div&gt;
  
  &lt;script&gt; 
      var divs = ["Inches", "Centimeters"];
      var visibleDivId = null;
  
      function divVisibility(divId) {
          if (visibleDivId !== divId) {
              visibleDivId = divId;
              hideNonVisibleDivs();
          }
      }
  
      function hideNonVisibleDivs() {
          var i, divId, div;
          for (i = 0; i &lt; divs.length; i++) {
              divId = divs[i];
              div = document.getElementById(divId);
              if (visibleDivId === divId) {
                  div.style.display = "block";
              } else {
                  div.style.display = "none";
              }
          }
      }        
  &lt;/script&gt;
  </code></pre>