為什么我的按鈕沒有打印出代碼並選擇正確的選項？

Question

我是Web開發的新手，在我的課程中，我被要求設計一個網站。

我的以下代碼有問題-背后的想法是，用戶從下拉菜單中選擇一只小狗（圖像與有關小狗的詳細信息一起顯示），然后他們可以按“采用”按鈕並采用那只狗。 所有這些都是出於學術目的，所以我現在要做的只是輸出說“您采用了（狗的名字）”，然后我希望對其進行更改，以便用戶可以在表格中填寫詳細信息。

但是，現在該按鈕根本無法使用，並且沒有打印任何內容。 代碼的兩個部分可以完美地分開工作，但是它們似乎分崩離析。

任何幫助或見解將不勝感激，因為這是我本人看不見的一個愚蠢的錯誤所造成的。

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（ 請選中此選項 ）。 您應該在JavaScript設置中選擇“不換行”加載類型選項（在JavaScript面板中單擊“ JAVASCRIPT”標題）。

您也忘記添加jQuery。 在左側欄中為此部分或“外部資源”部分使用JavaScript設置。 並使用jQuery將click事件綁定到您的按鈕，如下所示：

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

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

HTML：

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

JSFiddle演示

注意：您可以在JSFiddle中使用瀏覽器的控制台查看拋出的JavaScript錯誤。

Answer 2

三件事：
1.值在onchange處理程序內定義為“ var”，無法從外部看到。 為該值創建一個可見變量，即window.value（但我建議使用更好的名稱，而不是通用的“值”）。
2. select元素的onchange事件是在窗口范圍內定義的，該選擇在實際加載選擇之前還無法看到。 在文檔准備功能中調用它。
3.按鈕的onclick屬性是一個函數范圍，通過將全局變量“值”顯式引用為“ 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>