title: Cannot set property 'borderColor' of undefined
body: <p>Im copying this from a book (..so it "should" work), i cant get this function to work, it might be a duplicate but i searched for an answer and cant get it working.</p>
  
  <blockquote>
    <p>"Uncaught TypeError: Cannot set property 'borderColor' of undefined"</p>
  </blockquote>
  
  <p>It might be something simple but the <code>to</code> i believe is the problem i tried setting it to an array and object but i dont really understand,  any solution with simple explanation would be much appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeBorder(element, to){
      element.style.borderColor = to;
  }
      
  var contentDiv = document.getElementById('color');
  
  contentDiv.onmouseover = function(){
      changeBorder('red');
  };
      
  contentDiv.onmouseout = function(){
      changeBorder('black');
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    border: 1px solid red;
    background-color:pink;
    padding: 10px;
  }
      
  .row {
      border: 1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="row" id="color"&gt;
    &lt;div class="element"&gt;1&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;     
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just want to remove the error message and get the function to do something.</p>