title: Can't add property to object (Cannot set property of undefined)
body: <p>I am having problems with adding properties to an object. I want it to, when you click like, it will create a new property inside the "scores"-object and then increment that value by one. But I am getting this error when doing this:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property '(hex-code)' of undefined</p>
  </blockquote>
  
  <p>HTML</p>
  
  <pre><code>&lt;p style="display: inline;"&gt;Hex-code: &lt;/p&gt;
  &lt;input id="demo" type="text"&gt;
  &lt;button onclick="generate()"&gt;Generate&lt;/button&gt;
  
  &lt;div id="showcase" style="background: #FFF; width: 200px; height: 200px; margin: 20px; border-radius: 3px;"&gt;&lt;/div&gt;
  
  &lt;button onclick="like()"&gt;Like&lt;/button&gt;
  &lt;button onclick="dislike()"&gt;Dislike&lt;/button&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>var result = document.getElementById('demo').innerHTML;
  var hex;
  
  var scores = {}
  
  function generate () {
      var length = 3,
          charset = "ABCDEF0123456789",
          retVal = "";
      for (var i = 0, n = charset.length; i &lt; length; ++i) {
          retVal += charset.charAt(Math.floor(Math.random() * n));
      }
      finalVal = "#" + retVal;
      document.getElementById('demo').value = finalVal;
      document.getElementById('showcase').style.backgroundColor = finalVal;
      return hex = retVal;
  }
  
  function like () {
      scores[hex] = 0;
      scores[hex] += 1;
      return generate();
  }
  </code></pre>
  
  <p>Link to fiddle: <a href="https://jsfiddle.net/elliotsoomro/o0kuwc0d/4/" rel="nofollow">https://jsfiddle.net/elliotsoomro/o0kuwc0d/4/</a></p>