title: Using Javascript to change an anchor link's text when window width changes
body: <p>I'm trying to build a simple javascript that will change the contents of an anchor link when the browser window goes below a certain width, and change it back when it goes above said width.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;footer id="about" style=""&gt;
      &lt;ul id="aboutFooter" style=""&gt;
          &lt;li&gt;&lt;a href="http://twitter.com/whatever" id="twitter"&gt;OUR 140-CHARACTER THOUGHTS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="mailto:whatever@gmail.com" id="email"&gt;EMAIL US AT WHATEVER@GMAIL.COM&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="middleMan"&gt;OR KEEP THINGS SIMPLE AND HIT "NEXT"&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT:</strong></p>
  
  <pre><code> var mq = window.matchMedia( "(min-width: 1074px)" ); 
          if (mq.matches) { 
              document.getElementById("email").firstChild.nodeValue = "EMAIL US AT whatever@gmail.com";
              document.getElementById("twitter").firstChild.nodeValue = "OUR 140-CHARACTER THOUGHTS";
          }  
  
          else {
              document.getElementById("email").firstChild.nodeValue = "EMAIL";
              document.getElementById("twitter").firstChild.nodeValue = "TWITTER";
          }
  </code></pre>
  
  <p>At the moment, it's not working at all - just stays on the initial values for each element. I have jQuery running on the same page, is it possible that the two are interfering? </p>