title: Onclick event on an array of list items
body: <p>I have a list and I want to create a function that will bold the clicked list item. So far I managed to create a function and assign it to list items. Onclick, it bolds, but just one item. I don't know how to set it for each item. </p>
  
  <p>I could have used id to bold the items but there will be a lot of items in the list. I can't deal with each one of them.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;apple&lt;/li&gt;
      &lt;li&gt;orange&lt;/li&gt;
      &lt;li&gt;banana&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>var list = document.getElementsByTagName("li");
  
  function markSelection() {
      if(list[0].style.fontWeight !== "bold") {
          list[0].style.fontWeight = "bold";
      } else {
          list[0].style.fontWeight = "normal";
      }
  }
  
  for (i = 0, len = list.length; i &lt; len; i++){
      list[i].onclick = markSelection;
  }
  </code></pre>
  
  <p>It bolds only list[0]. How can I set it to bold the clicked list item? </p>
  
  <p><a href="http://jsfiddle.net/by9bP/" rel="nofollow">jsfiddle</a></p>