выпадающее меню обновляет внутренний HTML при изменении, JavaScript

Question

выпадающее меню обновляет внутренний HTML при изменении, JavaScript

0

У меня есть выпадающие меню, последние 2 - цена и билеты, которые затем вычисляют и показывают общую сумму на экране при выборе. Он отлично работает, хотя, если я изменяю выбор на другую цену, то сумма не обновляется. Также та же идея применяется к той части, где пользователь выбирает 4 или более билетов, и на экране появляется сообщение. Я уверен, что это что-то простое, но я не могу понять это.

Я прикрепил 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.")

    }   


}

Danni_B 18 фев. 2014, в 19:43

Источник

0

Это не про твой вопрос, но я должен это сказать. Вы должны действительно обобщить свой код. Это слишком повторяющееся. Используйте функции и структуры данных вместо того, чтобы просто повторять блоки кода с небольшими изменениями.
zord 18 фев. 2014, в 18:20

Теги:

javascript

html

1 ответ

Ещё вопросы

Это не про твой вопрос, но я должен это сказать. Вы должны действительно обобщить свой код. Это слишком повторяющееся. Используйте функции и структуры данных вместо того, чтобы просто повторять блоки кода с небольшими изменениями.

linstantnoodles · Accepted Answer · 2014-02-18T16-59-00.000Z

Вы не вызываете totalPrice в своих обработчиках изменений.

Например:

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

Вы добавили его здесь

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

Тем не менее, это только реагирует на изменения количества билетов. Вы не привязали его к другим элементам.

Кроме того - ваш onchange только срабатывает один раз, потому что вы заменяете поля параметров с помощью fillList после срабатывания события изменения. Вы можете либо привязать обработчик, либо ответить на событие click.

С учетом сказанного - я не рекомендую прикреплять обработчики как атрибуты HTML, и я предлагаю очистить свой код, чтобы быть более читаемым.

Кроме того, ваш onChange срабатывает только один раз ... вы, вероятно, хотите ответить и на onClick. По этой причине, когда вы перебираете желаемое количество билетов, цена не обновляется.