title: innerHTML & accessing object property
body: <p>I want to get the value of the list id. Then access the object property.
  For example, if egg is chosen:
  I want to get egg.cost ( which is 9)</p>
  
  <p>However, it is coming up as undefined.</p>
  
  <p>HTML portion :</p>
  
  <pre><code>&lt;select id = "list"&gt;
  &lt;option value = "egg"&gt;Eggs&lt;/option&gt;
  &lt;option value ="banana"&gt;Banana&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/select&gt;
  &lt;button onclick ="getSelectValue()"&gt;&lt;/button&gt;
  &lt;div id ="example"&gt;testing&lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>function getSelectValue(){
      var selectedValue = document.getElementById("list").value;
      document.getElementById("example").innerHTML=selectedValue["cost"];
  }
  
  var banana = {
                cost:1.39,
                servings:6,
                servingSize:1,
                costPerServing:.23
                };
  
  var egg = {
              cost:9,
              servings:24,
              servingSize:1,
              costPerServing:.38
  
            };
  </code></pre>