title: Why does my button not print out the code and select the right option?
body: <p>I'm relatively new to Web Development and for my coursework I've been asked to design a website. </p>
  
  <p>I'm having a problem with the following code - the idea behind it is that the user selects a puppy from the drop down menu (the image is displayed along with details about the pup) then they can press the 'Adopt' button and adopt the dog. It's all for academic purposes so just now all I'm trying to do is output saying 'You adopted (the dog's name)' hopefully then I will be alter it so the user can fill out a form with details.</p>
  
  <p>However, just now the button won't work at all and nothing is printed out. The two parts of code work perfectly separately but together them seem to fall apart.</p>
  
  <p>Any help or insight would be appreciated as this is properly caused by a silly mistake on my part that I just can't see. </p>
  
  <p><a href="https://jsfiddle.net/heh4d63j/" rel="nofollow">https://jsfiddle.net/heh4d63j/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="selector"&gt;
  &lt;option&gt;Select product&lt;/option&gt;
  &lt;option value="1"&gt;John&lt;/option&gt;
  &lt;option value="2"&gt;Yana&lt;/option&gt;
  &lt;option value="3"&gt;Fifi&lt;/option&gt;
  &lt;option value="4"&gt;Ruby&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
  Name: &lt;span id="dog-title"&gt;&lt;/span&gt;
  &lt;br&gt;
  Gender: &lt;span id="dog-gender"&gt;&lt;/span&gt;
  &lt;br&gt;
  Age: &lt;span id="dog-age"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;img id="dog-image" src="someimage.png" /&gt;
  &lt;/div&gt;
  
  &lt;button onclick="adoptDog(value)"&gt;Adopt Dog&lt;/button&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#dog-image
  {
  width:300px;
  height:auto; 
  border:1px solid black;
  padding:5px;
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var data = {
  
  "1" : { 
  img: "https://s-media-cache-ak0.pinimg.com/736x/a0/e9/cd/a0e9cddfdce31044874f02f781a30245.jpg", 
  label: "John" ,
  gender: "Male",
  age: "11 weeks" },
  
  "2" : { 
  img: "https://s-media-cache-ak0.pinimg.com/564x/69/62/7f/69627f67a78540334ef54da048d423b6.jpg", 
  label: "Yana",
  gender:"Female", 
  age:"10 weeks" },
  
  "3" : { 
  img: "http://i45.photobucket.com/albums/f91/sarahriley1983/DSC01542.jpg", 
  label: "Fifi",
  gender:"Female", 
  age: "8 weeks" },
  
  "4" : { 
  img: "http://www.dogster.com/wp-content/uploads/2015/05/rhodesian-ridgeback-puppies-10.jpg",
  label: "Ruby", 
  gender:"Female", 
  age:"12 weeks" },
  };
  
  function adoptDog(value) {
  
  var dogName="Ruby";
  document.getElementById("demo").innerHTML = "You adopted " +   data[value].label
  }
  
  $('#selector').change(function(value) {
  var value = $(this).val();
  if (data[value] != undefined)
  {
      $('#dog-image').attr('src', data[value].img);
      $('#dog-title').text(data[value].label);
      $('#dog-gender').text(data[value].gender);
              $('#dog-age').text(data[value].age);
  }
  });
  </code></pre>
  
  <p>Thanks again for any help that can be offered. :)</p>