为什么我的按钮没有打印出代码并选择正确的选项？

Question

I'm relatively new to Web Development and for my coursework I've been asked to design a website.

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.

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.

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.

https://jsfiddle.net/heh4d63j/

HTML

<select id="selector">
<option>Select product</option>
<option value="1">John</option>
<option value="2">Yana</option>
<option value="3">Fifi</option>
<option value="4">Ruby</option>
</select>

<div>
Name: <span id="dog-title"></span>
<br>
Gender: <span id="dog-gender"></span>
<br>
Age: <span id="dog-age"></span>
</div>
<div>
<img id="dog-image" src="someimage.png" />
</div>

<button onclick="adoptDog(value)">Adopt Dog</button>

<p id="demo"></p>

CSS

#dog-image
{
width:300px;
height:auto; 
border:1px solid black;
padding:5px;
}

JAVASCRIPT

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);
}
});

Thanks again for any help that can be offered. :)

Answer 1

JSFiddle doesn't support inline-JS like onclick by default ( check this ). You should select 'No wrap' Load Type option in JavaScript settings (click on the "JAVASCRIPT" title in the JavaScript panel).

Also you forgot to add jQuery. Use JavaScript settings for this or "External Resources" section in the left sidebar. And bind click event to your button with jQuery like this:

function adoptDog() {
    var val = $('#selector').val();
    $("#demo").html("You adopted " + data[val].label);
}

$("#adopt").click(adoptDog);

Html:

<button id="adopt">Adopt Dog</button>

JSFiddle demo

Note: you can use your browser's console in JSFiddle to look at thrown JavaScript errors.

Answer 2

Three things:
1. Value is defined as 'var' inside the onchange handler, cannot be visible from outside. Create a visible variable for that value, ie window.value (but I'd suggest to use a better name, not as generic as 'value').
2. The onchange event for the select element is defined in the window scope, before the select is actually loaded and cannot be seen yet. Invoke it in a document ready function.
3. The button onclick attribute is a function scope, reference the global 'value' variable by explicitly referring to it as 'window.value'.

JS:

window.value = "";

function adoptDog(value) {
  if (value) {
    var dogName = "Ruby";
    document.getElementById("demo").innerHTML = "You adopted " + data[value].label
  }
}

$('document').ready(function () {
  if (!document.body) {setTimeout(ready, 50); return;}
  $('#selector').change(function(ev) {
    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);
    }
  });
});

HTML:

<button onclick="adoptDog(window.value)">Adopt Dog</button>