drop down menu updates inner HTML when changed, javascript

Question

I have drop down menus, the last 2 are price and tickets which then makes a calculation and shows the total amount on screen when selected. It works fine although if i change the selection to a different price the total does not update. Also the same idea applies to the part where the user selects 4 or more tickets and an message appears on screen. Im sure its something simple but i cant seem to figure it out.

I have attached a Jsfiddle.

http://jsfiddle.net/Dwdqg/

function totalPrice(ticketCount,priceAmount)
{           
    if (tickets.selectedIndex != 0 && price.selectedIndex != 0)  // if the price and tickets is not 0 or not selected
    {                       
        tickets.onchange = ticketCount;  //when tickets is changed assign the index to var ticketCount

        price.onchange = priceAmount;

        var ticketCount = tickets.value;  //get the value of ticketCount index

        var priceAmount = price.value;

        var totalPrice = (ticketCount * priceAmount);       

        document.getElementById("totalPrice").innerHTML = ("Total Price £" + totalPrice);           

    }


    if (ticketCount >= 4)  // if ticketCount is 4 or more
    {
        totalPrice = totalPrice + 10;  // add on 10 to the price

        document.getElementById("totalPrice").innerHTML = ("Total Price £" + totalPrice);

        document.getElementById("moreTickets").innerHTML = ("Buying four or more tickets will add an additional £10 fee.")

    }   


}

Answer 1

You're not calling totalPrice in your change handlers.

For example:

price.onchange = function()
  // totalPrice needs to be called
}   

You've attached it here

<select name="tickets" id="tickets" onChange="totalPrice(tickets)" style="width:120px">

However, that only responds to changes to number of tickets. You haven't attached it to the other elements.

Also - your onchange only fires once because you're replacing the option fields using fillList after the change event fires. You can either reattach the handler or have it respond to a click event.

With that said - I don't recommend attaching handlers as HTML attributes and I suggest cleaning up your code to be more readable.