Innerhtml shows on page load instead of on click

Question

I did the CodeAcademy Challenge for Javascript and for the last lessons we built a Cash Register. I tried to make the Cash Register useable by using HTML and already I am stuck.

My intention was to show the list and the total price when the button is clicked but instead, the button does nothing onclick and the list and total price is shown as soon as the page loads. (Input functionality has not been implemented yet) I can't figure out what I am doing wrong.

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

Try changing that line near the end to:

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

As soon as you invoke multscan(i), it runs. By wrapping it in a function, you are creating (and not running) a new function whose body is "run multscan with variable i." You also need to make sure that the function is accessible globally to your input element, outside of your loader function. Hence using window.runmultscan (Appending functions to the "window" object makes them global - in general this is bad practice, but for this example it's probably what you want.)

Answer 2

By writing var runmultscan = multscan(i); and console.log('Your bill is '+cashRegister.total); directly inside script tag results in invocation of both statements onload of script. To prevent this and to invoke on "onclick" event on Button, we can put these statements in a function as below:

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

Answer 3

You will also want to clear the text inside of the output, with something like this.

output.innerHTML = "";

http://jsfiddle.net/EsN96/