Javascript: обновлять цену при изменении количества

Question

Я новичок в javascript, и я работаю над этим уже 4 дня, и я не добился никакого прогресса. Я перепробовал кучу разных вариантов. Я видел пример, как мой, который работал ... но он не работает для меня. :( Я пытаюсь настроить цену по мере изменения количества билетов. Ниже приведен javascript и ниже html. Любая помощь очень ценится! Спасибо!

document.getElementById("totalTicketCost").value = 0 + "." + 00;

function ticketCost()


{

var ticketCost = 5.5;

var inputTicketQuantity = document.getElementById("inputTicketQuantity").value;

var totalTicketCost = parseFloat(ticketCost) * inputTicketQuantity;



if (!isNaN(totalTicketCost))





document.getElementById("totalTicketCost").innerHTML = totalTicketCost;



}

    <form onsubmit="" ="return alertDetails()" id="formPurchaseTickets" enctype="text/plain" method="post" action="mailto:cmst388@xyz.com">
        <h1>Ticket Purchasing Form</h1>
        <p class="alert">Act fast! This transaction must be completed in <span id="timer"></span> minutes.</p>
        <div class="field">
            <label class="required">How many tickets would you like to purchase?</label>
            <input id="inputTicketQuantity" tabindex="1" required type="number" value="0" name="ticket-quantity" min="1" max="3" step="1" title="You can only buy between 1 and 3 tickets">
            $<span id="totalTicketCost">0.00</span>
        </div>

        <div id="contactInfo" style="display:none;">
            <div class="field">
                <label class="required">Name:</label>
                <input required name="name" tabindex="2" type="text" placeholder="Enter name" pattern="[a-zA-Z\s]+" title="Enter only letters. e.g. Smith">
            </div>

            <div class="field">
                <label class="required">E-mail:</label>
                <input id="inputEmail" tabindex="3" required name="email" type="email" placeholder="Enter e-mail address"  onblur="validateEmail()">
            </div>
        </div>
        <hr>

        <input type="submit" tabindex="4" value="Purchase Tickets"> <input type="reset">
    </form>



    <script src="event_registration.js"></script>

</body>

Answer 1

Здесь, используя только ES5 (при условии, что на этом этапе вы не выполняете перенос), я быстро выполнил рефакторинг.

var ticketInput = document.getElementById("totalTicketCost");
var inputTicketQuantity = document.getElementById("inputTicketQuantity");
var ticketCost = 5.5;

// Handle the precision up to >= $100
function changeCost( num ) {
  var cost = new Number( parseFloat( num ) * ticketCost );
  var precision = cost.toString().length === 3 ? 3 : 4;
  return cost.toPrecision( precision );
}

inputTicketQuantity.addEventListener('input', function( event ) {
  var value = event.target.value;
  if ( !isNaN( value ) ) {
    ticketInput.innerHTML = changeCost( value );
  }
});

Вы определенно хотите максимально отделить JS от HTML, избегайте трудно читаемых встроенных вещей, таких как <form onsubmit="" ="return alertDetails()", по крайней мере, <form onsubmit="return alertDetails()", чтобы исправить это.

Answer 2

Вы должны вызвать функцию ticketCost() при изменении значения текстового поля ввода количества

<input id="inputTicketQuantity" onkeydown="ticketCost()" tabindex="1" required type="number" value="0" name="ticket-quantity" min="1" max="3" step="1" title="You can only buy between 1 and 3 tickets">

Или вы можете добавить слушателя в JavaScript как

document.getElementById("inputTicketQuantity").addEventListener("onkeydown", ticketCost);

Добавьте его за пределы функции JavaScript ticketCost ()

Answer 3

Ваш вопрос не очень конкретен в отношении того, чего вы пытаетесь достичь, но здесь есть функция, позволяющая обновлять общую стоимость, когда пользователь добавляет билеты -

В JS:

function updateCost(count)
{
   var ticketCost = 5.5;
   document.getElementById("totalTicketCost").innerHTML = count * ticketCost;
}

В HTML

<input id="inputTicketQuantity" tabindex="1" required type="number" value="0" name="ticket-quantity" onchange="updateCost(this.value)" min="1" max="3" step="1" title="You can only buy between 1 and 3 tickets">

Answer 4

Добавьте прослушиватель событий в поле количества и пересчитайте цену.

document.querySelector("#inputTicketQuantity").addEventListener("input", function() {
  let count = this.value;
  calculatePrice(count);
});