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

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>