title: Why is document.getElementById('foo').value not a reference?
body: <p>I'm playing around with the following function and I love it:<br>
  <code>var $ = function( id ) { return document.getElementById( id ); };</code></p>
  
  <p>For my current code, I'm <strong>ONLY</strong> ever referring to every element's <code>value</code>.<br> 
  So I thought, "why not just update my function to include <code>.value</code>?</p>
  
  <p>So this works just fine:</p>
  
  <pre><code>var $ = function( id ) { return document.getElementById( id ); };
   $("foo").value = whatever // WORKS JUST FINE :)
  </code></pre>
  
  <p>but this breaks:</p>
  
  <pre><code>var $ = function( id ) { return document.getElementById( id ).value; };
  $("foo") = whatever // Left side of assignment is not a reference
  </code></pre>
  
  <p>I think I have an idea of what's going on, but since it's hard to put it to words, I'd rather assume I'm wrong.</p>
  
  <p>So what's happening here?</p>
  
  <p>By the way, please feel free to comment: <br></p>
  
  <ul>
  <li>IS this a reference error, like I'm assuming?</li>
  <li>Is there a way I can highlight my code to point out the differences between each line better?</li>
  <li>How could I have written my code to show the error all fancy like this picture instead of my comment text (especially how to get it smaller) ?<a href="https://i.stack.imgur.com/EmrUQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EmrUQ.png" alt="my error image"></a></li>
  </ul>