Javascript：数量变化时更新价格答案

【问题标题】：Javascript: Update price when quantity changesJavascript：数量变化时更新价格
【发布时间】：2018-05-02 23:58:34
【问题描述】：

我是 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>

【问题讨论】：

你在哪里卡住了？你似乎没有调用ticketCost() 函数...
是的。我试过“onchange="totalTicketCost"”和“onclick”。我想我很困惑在哪里放置触发器。老师说不要编辑html文件，我认为这意味着我可以在javascript中启动该功能？但是，这对我来说没有意义，因为当门票数量发生变化时，货币价值就会发生变化。例如，我将门票数量输入为“2”，然后价格更新为 11 美元。如果我放 3 张票，那就是 16.50 美元。
您也可以在 JavaScript 中附加监听器，无需更改 html 代码，请参阅我的答案
好的。我正在收拾笔记本电脑，准备回家。我回家后会试一试。谢谢。
谢谢大家的帮助！我标记了正确的答案。我还有很多东西要学。非常感谢您抽出宝贵时间回答我的问题。

标签： javascript html price calculation

【解决方案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()" 来修复它。

【讨论】：

啊，非常感谢！这解决了问题。我还有很多东西要学。
完全没问题。当你到达 ES6 / ES2015 时，你将有一些更好的工具可以使用。 :)
仅供参考，我注意到我自己的回应 - var cost = Number() 而不是 var cost = new Number()

【解决方案2】：

为您的数量字段添加一个事件监听器，并重新计算价格。

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

【讨论】：

仅当您想警告代码读者您将重新分配变量时才使用let。否则，请始终使用const。
让问题作者自己决定如何在他的cace中做得更好

【解决方案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">

【讨论】：

【解决方案4】：

您必须在输入数量文本框的值更改事件上调用函数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() 之外添加它

【讨论】：