Question

我为Javascript做了CodeAcademy挑战赛，最后一课我们建立了收银机。我试图通过使用HTML使收银机可用，但我已经卡住了。

我的目的是显示单击按钮时的列表和总价格，但是按钮没有任何内容，只要页面加载就会显示列表和总价。（输入功能尚未实现）我无法弄清楚我做错了什么。

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），它就会运行。通过将它包装在一个函数中，你创建（而不是运行）一个新的函数，它的主体是＆＃34;用变量i运行multscan。＆＃34;您还需要确保在加载器函数之外的输入元素全局访问该函数。因此，使用window.runmultscan（将函数附加到＆＃34;窗口＆＃34;对象使它们成为全局 - 通常这是不好的做法，但是对于这个例子，它可能是你想要的。）

Answer 2

撰写var runmultscan = multscan(i);和console.log('Your bill is '+cashRegister.total); 直接在脚本标记内部导致调用两个语句onload脚本。为了防止这种情况并调用＆＃34; onclick＆＃34;在Button上的事件，我们可以将这些语句放在如下函数中：

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

Answer 3

您还需要清除输出内的文本，如下所示。

output.innerHTML = "";

http://jsfiddle.net/EsN96/

Innerhtml显示页面加载而不是点击

3 个答案: