javascript代码中的计算器

我为我的网站构建了一个简单的计算器，但我在javascript代码中遇到了一个问题，我无法识别它。在JSFIDLE中可以很好地工作，但是当我放入空白HTML页面时，代码就不起作用了

这里有一个

var数据={
“0”：[“请从上面选择”]，
“20”：[“Pachet 360$0”、“Pachet 900$28”、“Pachet 1800$80”、“Pachet 3600$180”、“Pachet 9000$500”、“Pachet 18000$1020”]，
“15”：[“免费包装0”、“包装400$10”、“包装899$45”、“包装1599$85”、“包装2999$185”、“包装5999$385”]，
“10”：[“包装402.5美元10”、“包装1725美元80”、“包装8625美元480”]
}
$（“#一”）。更改（函数（）{
var first=$（此），
秒=$（“#二”），
key=first.val（），
//而不是原始的开关代码
VAL=数据[键]==未定义？数据库：数据[键]，
html=[]；
$。每个（val，函数（i，val）{
var v=val.split（“”）；
html.push（“”+v[0]+“”）
});
html（html.join（））；
});
$（“#一，#二”）。更改（函数（）{
var val1=parseInt（$（'#one'）.val（））| 0，
val2=parseInt（$（'#two'）.val（））| 0；
$（“#总计”）.text（val1+val2）
$（#total2'）。文本（（val1+val2）*52）
})

您需要将jquery库包含到空白HTML页面中

<script src="//code.jquery.com/jquery-1.4.3.min.js"></script>

---

在您的网站中，您甚至在加载DOM之前就调用了JavaScript函数，因此没有将任何功能分配给任何元素，因为在分配时它们不存在

或者，在关闭

标记之前定义脚本，或者使用document.ready包装器

$(document).ready(function() {
   //Your Code
});

---

由于它在fiddle中工作，您是否验证了您使用的JavaScript是否已正确加载到您的网站中？请记住包括jQuery并使用document.ready，正如JSFIDLE为您所做的那样，fiddle已经预加载了jQuery。页面中是否加载了jQuery？似乎您忘记了jQuery Javascript标记或使用$（document）.ready（function（）{}）；阻塞Javascript代码。如果您在select查询上声明更改事件，这一点非常重要。jquery代码包括在内。这里有一个a到HTML页面，我已经在jQuery的HTML页面中包含了它，但它不起作用。下面是一个HTML页面，您可以在DOM元素完全加载之前将其绑定到事件。将代码封装在$（“document”）.ready（function（）{}）中@我别忘了把它标为正确答案：）

// arrays instead of comma separated list and added base key
var data = {
    "0": ["Please choose from above"],
        "20": ["Pachet 360$_0", "Pachet 900$_28", "Pachet 1800$_80", "Pachet 3600$_180", "Pachet 9000$_500", "Pachet 18000$_1020"],
        "15": ["Pachet free_0", "Pachet 400$_10", "Pachet 899$_45", "Pachet 1599$_85", "Pachet 2999$_185", "Pachet 5999$_385"],
        "10": ["Pachet 402.5$_10", "Pachet 1725$_80", "Pachet 8625$_480"]
}

$(document).ready(function() {
    $("#one").change(function () {
        var first = $(this),
            second = $("#two"),
            key = first.val(),
            // instead of the original switch code
            vals = data[key] == undefined ? data.base : data[key],
            html = [];
        // create insert html before adding
        $.each(vals, function (i, val) {
            var v = val.split('_');
            html.push('<option value="' + v[1] + '">' + v[0] + '</option>')
        });
        // no need to empty the element before adding the new content
        second.html(html.join());
    });

    $("#one,#two").change(function () {
        var val1 = parseInt($('#one').val()) || 0,
            val2 = parseInt($('#two').val()) || 0;
        $('#total').text(val1 + val2)
        $('#total2').text((val1 + val2)*52)
    })

});

$(document).ready(function() {
   //Your Code
});