Question

我有下拉菜单，最后2个是价格和门票，然后进行计算并在选择时显示屏幕上的总金额。它工作正常，但如果我将选择更改为不同的价格，总数不会更新。同样的想法也适用于用户选择4张或更多张票并且屏幕上出现消息的部分。我确定它很简单，但我似乎无法弄明白。

我附上了一个Jsfiddle。

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

您没有在更改处理程序中调用totalPrice。

例如：

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

你已将它附在此处

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

但是，这只会响应门票数量的变化。您尚未将其附加到其他元素。

此外 - 您的onchange仅触发一次因为您在更改事件触发后使用fillList替换选项字段。您可以重新附加处理程序，也可以让它响应click事件。

话虽如此 - 我不建议将处理程序作为HTML属性附加，我建议清理代码以使其更具可读性。

更改时，下拉菜单更新内部HTML，javascript

1 个答案: