Question

我对Web开发相对较新，而且我的课程作业被要求设计一个网站。

我对以下代码有疑问 - 背后的想法是用户从下拉菜单中选择一只小狗（图像与小狗的详细信息一起显示）然后他们可以按＆＃39;采用＆＃39;按钮并采用狗。这一切都是为了学术目的，所以我现在所做的只是输出说“你采用了（狗的名字）＆＃39;希望我会改变它，以便用户可以填写一份包含详细信息的表格。

然而，刚才按钮根本不起作用，没有打印出任何内容。代码的两个部分完美地分开工作，但它们似乎一起分崩离析。

任何帮助或见解都会受到赞赏，因为这是由于我无法看到的一个愚蠢的错误造成的。

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不支持online-JS，例如onclick（check this）。您应该在JavaScript设置中选择'无包装'加载类型选项（单击JavaScript面板中的“JAVASCRIPT”标题）。

你也忘了添加jQuery。使用左侧栏中的此设置或“外部资源”部分的JavaScript设置。并使用jQuery将click事件绑定到您的按钮，如下所示：

madP1Ref

HTML：

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

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

JSFiddle demo

注意：您可以使用JSFiddle中的浏览器控制台来查看抛出的JavaScript错误。

Answer 2

三件事：
1。值在onchange处理程序中定义为“var”，无法从外部看到。为该值创建一个可见变量，即window.value（但我建议使用更好的名称，而不是像'value'那样通用）。
2。 select元素的onchange事件在window范围中定义，在select实际加载之前尚无法看到。在文档就绪函数中调用它。
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>

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

2 个答案: