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

Why does my button not print out the code and select the right option?

本文关键字：选择 选项 代码 按钮 我的 打印 为什么      更新时间：2023-09-26

我对Web开发比较陌生，因为我的课程作业，我被要求设计一个网站。

我对下面的代码有一个问题-它背后的想法是用户从下拉菜单中选择一只小狗(图像显示有关小狗的详细信息)，然后他们可以按下"收养"按钮并收养这只狗。这都是出于学术目的，所以现在我所要做的就是输出"你收养了(狗的名字)"，希望我能改变它，这样用户就可以填写一个详细信息的表格。

然而，现在这个按钮根本不工作，什么也没有打印出来。这两个部分的代码分开工作很完美，但放在一起似乎就分开了。

任何帮助或见解将是感激的，因为这是由一个愚蠢的错误造成的，我只是看不见。

https://jsfiddle.net/heh4d63j/

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

再次感谢您提供的任何帮助。:)

JSFiddle默认情况下不支持像onclick这样的内联js(检查这个)。你应该在JavaScript设置中选择'No wrap' Load Type选项(点击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错误

三件事:
1。Value在onchange处理程序中被定义为'var'，不能从外部可见。为该值创建一个可见变量，即window。value(但我建议使用一个更好的名字，而不是像"value"那样通用)。
2。select元素的onchange事件是在窗口作用域中定义的，在实际加载select之前，它还不能被看到。在文档准备函数中调用它。
3。button onclick属性是一个函数作用域，通过显式引用全局'value'变量'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>
相关文章：