title: Onclick event on list item
body: <p>I'm trying to follow <a href="https://stackoverflow.com/a/6194511/2962505">this answer</a>, but rather than using a button as he does in his jsfiddle, I'm trying to use list items:</p>
  
  <p><a href="http://jsfiddle.net/hqvDT/108/" rel="nofollow noreferrer">http://jsfiddle.net/hqvDT/108/</a></p>
  
  <p>It looks like it should work, but when I try to select some text and then press <code>B</code> (for bold), it doesn't actually bold the text.</p>
  
  <p>What's wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="myarea" contenteditable="true"&gt;&lt;/div&gt;
  
  &lt;ul&gt;
      &lt;li onclick="MakeBold();"&gt;B&lt;/li&gt;
      &lt;li&gt;&lt;i&gt;I&lt;/i&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#myarea {
     border:1px solid #000;
     padding:5px; 
     height:150px;
     width:400px;
     overflow:scroll; 
  }
  
  ul {
      list-style: none;
  }
  
  ul li {
      width: 35px;
      height: 35px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #999;
      cursor: pointer;
      display: inline-block;
      margin-right: -5px;
      font-weight: bold;
      font-size: 18px;
  }
  
  ul li:hover {
      color: black;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function MakeBold() {
      document.execCommand('bold', null, false);
  }
  </code></pre>