javascript - Innerhtml 在页面加载时显示而不是在点击时显示

Question

我参加了 CodeAcademy Javascript 挑战赛，最后一节课我们制作了一个收银机。我试图通过使用 HTML 使收银机可用，但我已经卡住了。

我的意图是在单击按钮时显示列表和总价，但按钮在单击时什么也不做，页面加载后会立即显示列表和总价。 (输入功能尚未实现)我不知道我做错了什么。

http://jsfiddle.net/U2J57/

HTML

<button onclick="runmultscan()">Print bill</button>

JavaScript

var cashRegister = {
    total:0,
    add: function(itemCost){
            this.lastTransactionAmount = itemCost;
            this.total += itemCost;
        },
    scan: function(item, n) {
            switch (item) {
            case "eggs": this.add((0.98)*n); break;
            case "milk": this.add((1.23)*n); break;
            case "magazine": this.add((4.99)*n); break;
            case "chocolate": this.add((0.45)*n); break;
            }
        },
           voidLastTransaction: function() {
        this.total -= this.lastTransactionAmount;
        },

    applyStaffDiscount: function(employee){
        this.total *= ((100-employee.discountPercent)/100);
    }
};
        //Staff Member Object Constructor//
var StaffMember = function (name, discountPercent) {
    this.name = name;
    this.discountPercent = discountPercent;
    },    
        //Multiple item scanner function//
multscan = function() {
        //Get DOM ids//
    var input = document.getElementById('in');
    var output = document.getElementById('out');
        for (var ii=0; ii<i[0].length; ii++){
        cashRegister.scan(i[0][ii], i[1][ii]);
        console.log('You have: ' + i[1][ii] + ' ' + i[0][ii]);
        output.innerHTML += '<p>' + 'You have: ' + i[1][ii] + ' x ' + i[0][ii] + '</p>';
        }
        t = cashRegister.total
        total = t.toFixed(2)
        output.innerHTML += '<p>' + 'Your bill is ' + total + '</p>';       
} ;
        //Input for staff discount//
var sally = new StaffMember("Sally",5);
var bob = new StaffMember("Bob",10);
var me = new StaffMember("David", 20);
        //Input//
var i = [
        ['eggs', 'milk', 'magazine', 'chocolate'],
        [0, 4, 4, 4]
        ] ;
        //Trigger//

var runmultscan = multscan(i);
        //Output//
console.log('Your bill is '+cashRegister.total);

Answer 1

尝试将靠近末尾的那行更改为:

window.runmultscan = function() { multscan(i); }; 

只要调用 multscan(i)，它就会运行。通过将它包装在一个函数中，您正在创建(而不是运行)一个新函数，其函数体是“使用变量 i 运行 multscan”。您还需要确保您的输入元素可以在加载程序函数之外全局访问该函数。因此使用 window.runmultscan(将函数附加到“window”对象使它们成为全局的——通常这是不好的做法，但对于这个例子，它可能是你想要的。)