Javascript：当数量发生变化时更新价格

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



}

---

在“数量”字段中添加事件侦听器，然后重新计算价格

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

必须调用函数ticketCost on input quantity文本框的值更改事件

<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函数ticketCost之外

您的问题并不是非常具体地说明您想要实现什么，但这里有一个功能可以在用户添加ticket时更新您的总成本-

在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">

---

这里只使用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分开，避免那些难以阅读的内联内容，比如你在哪里被卡住了？您似乎没有调用ticketCost函数…是的。我试过onchange=totalTicketCost和onclick。我想我不知道该把扳机放在哪里。老师说不要编辑html文件，我想这意味着我可以用javascript启动函数？然而，这对我来说没有意义，因为只有当票数改变时，货币价值才会改变。例如，我将票的数量输入为2，然后价格更新为11美元。如果我放3张票，16.50美元。你也可以用JavaScript附加监听器，而不需要更改html代码，请参阅我的答案好的。我正在收拾笔记本电脑回家。我回家后会试试的。谢谢，谢谢大家的帮助！我标出了正确的答案。我还有很多东西要学。非常感谢您抽出时间回答我的问题。仅当您希望警告代码的读者您将重新分配变量时，才使用let。否则，请始终使用const。让问题作者自己决定如何在他的caceAh中做得更好，非常感谢！这就解决了问题。我还有很多东西要学，没问题。当您进入ES6/ES2015时，您将可以使用一些更好的工具：仅供参考，我注意到我自己的回答-var成本=数字而非var成本=新数字

<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">

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 );
  }
});