私のボタンがコードを印刷せずに正しいオプションを選択しないのはなぜですか？

Question

私はWeb Developmentに比較的新しいです。私の授業ではウェブサイトをデザインするように求められました。

私は次のコードに問題があります。その背後にあるアイデアは、ドロップダウンメニューから子犬を選択することです（画像は子犬の詳細とともに表示されます） 'ボタンを押して犬を採用する。それはすべて学術目的のためだから、今私がしようとしているのは、「あなたが（犬の名前）を採用しました」という出力を出力して、うまくいけば、ユーザーが詳細を記入できるように変更します。

ただし、今はボタンがまったく機能せず、何も印刷されません。コードの2つの部分は完全に別々に動作しますが、それらは一緒に分解されるようです。

これは適切に私が見ることができない私の部分でばかげたミスによって引き起こされるので、任意の助けや洞察力は評価されるだろう。

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

もう一度お手伝いをいただき、ありがとうございます。 :)

Answer 1

JSFiddleはデフォルトでonclickのようなインラインJSをサポートしていません（check this）。 JavaScript設定で'ラップなし' Load Typeオプションを選択する必要があります（JavaScriptパネルの「JAVASCRIPT」タイトルをクリックしてください）。

また、jQueryを追加するのを忘れました。これにはJavaScript設定を使用するか、左側のサイドバーに"外部リソース"セクションを使用してください。

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

注：あなたがスローされたJavaScriptエラーを見てJSFiddleにブラウザのコンソールを使用することができますし、このようにjQueryを使ってあなたのボタンにイベントをクリックしてバインドします。

Answer 2

3つのもの：
1.値はonchangeハンドラ内で 'var'として定義され、外側からは表示できません。その値、すなわちwindow.valueのための可視変数を作成します（しかし、私はより良い名前を使用することをお勧めします、 '値'として一般的ではありません）。
2. select要素のonchangeイベントは、選択範囲が実際にロードされ、まだ表示されないうちに、ウィンドウスコープで定義されます。文書準備機能で呼び出します。
3.ボタンonclick属性は関数スコープです。明示的に 'window.value'として参照することによって、グローバル '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>