title: How do I change the color of a div with onclick by calling a function in JavaScript?
body: <p>If I put <code>this.style.background="#000";</code> inline in the div, like <code>onclick="this.style.background="#000";</code>, it works. However, if I put that in a function and call the function from the same onclick event, it doesn't work. However, if I make the function do something else (like bring up an alert box), it does work. What's going on? </p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .tile {
      width: 48px;
      height: 48px;
      margin: 0px;
      padding: 0px;
      float: left;
      background-color:red;
      border: 1px solid black;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="tile" onclick="myFunction()"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  function myFunction() {
      this.style.background="#000000";
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>