title: Trying to make sense of [object HTMLCollection] From JavaScript .innerHTML Right Function?
body: <p>I'm a newcomer to JavaScript. I'm trying to get what I thought would be a simple "onchange" event to work with an input form element and have a JavaScript function write back the value of the input using .innerHTML.</p>
  
  <p>Here is what my output looks like:</p>
  
  <p>First Name * </p>
  
  <p>Hello [object HTMLCollection]</p>
  
  <p>How do I deal with a variable returning the message of "[object HTMLcollection]" Please be explicitIn answering, because as I said, I'm a newcomer to javascript.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;onchange event Testing input text&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  &lt;!--
  function write_firstname()
  {
  var fnid = document.getElementById("fnm");
  var fn = document.getElementsByName("first_name");
  
  fnid.innerHTML = "Hello " + fn;
  }
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
  &lt;!----&gt;
  &lt;label for="first"&gt;First Name *&lt;/label&gt;
  &lt;br /&gt;
  &lt;div class="form_indent"&gt;
  
      &lt;input id="first" type="text" name="first_name" onChange="write_firstname();" autofocus&gt;
      &lt;p id="fnm"&gt;&lt;/p&gt;
      &lt;br /&gt;
  &lt;/div&gt;
  &lt;!----&gt; 
  &lt;!----&gt;
  &lt;div class="form_indent"&gt;
      &lt;input type="submit" value="Submit"&gt;
      &amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;input type="reset" value="Reset"&gt;
  &lt;/div&gt;
  &lt;!----&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know it's probably something simple.  Someone please kick me in the right direction!</p>