价格计算器：当客人数量和/或选择发生变化时更新总价（JS 和 HTML）

Question

我正在为旅行构建一个价格计算器。总价格应根据所选的旅游类型和客人数量而变化。

现在，当选择旅行类型时，计算器会更新并计算总价，但是当我更改客人数量时，我无法更新它。

按照现在的编程方式，如果我先输入客人数量，然后选择旅游类型，总价将正确显示。但是，如果我随后返回并尝试更新客人数量，价格将不会更新 - 因此我目前必须更改客人数量，然后选择新的旅游类型，然后重新选择我想要的旅游类型，以便以获得更新的总数

function populate(tournameId) {
  var total = 0;
  var quantity = document.getElementsByName('quantity')[0].value;
  var tournameSelect = document.getElementById(tournameId);

  let selectedOption = tournameSelect.options[tournameSelect.selectedIndex];

  var selectedtournameValue = +selectedOption.dataset.price;
  var total = quantity * selectedtournameValue;
  document.getElementById("total").value = total;
}

<p class="normalinput">Enter Total Number of Guests:</p>
<input type="number" class="quantity" name="quantity" value="0" required>
<br>
<select class="normalinput" name="tourname" id="tourname" onchange="populate('tourname')">
  <option data-price="0" value="None">None</option>
  <option data-price="59" value="G0001">Milano Coffee Crawl (Coffee Included) <span>&#8364;       </span>59</option>
  <option data-price="49" value="G0002">Milano Coffee Crawl (Coffee Not Included) <span>&#8364;</span>49</option>
  <option data-price="39" value="G0003">Milano History Walk <span>&#8364;</span>39</option>
  <option data-price="69" value="G0004">Napoli Coffee Crawl (Coffee Included) <span>&#8364;</span>69</option>
  <option data-price="59" value="G0005">Npoli Coffee Crawl (Coffee Not Included) <span>&#8364;</span>59</option>
</select>
<p class="total"> Total: <span>&#8364;</span><input type="text" name="total" id="total" value="0"></p>

Answer 1

问题是因为您需要将事件处理程序绑定到

select

和

input

。此外，您的逻辑需要读取所有相关字段中的值，然后才能将其用于计算。从那里您可以更新总数。

另请注意，在 HTML 中使用

onX

属性不再是一个好习惯，因此请务必警惕任何推荐此操作的指南或教程。相反，您应该使用 JS 附加事件处理程序，如以下示例所示：

const tourSelect = document.querySelector('#tourname');
const quantityField = document.querySelector('.quantity');
const totalField = document.querySelector('#total');

const calculateTotal = () => {
  const selectedOption = tourSelect.options[tourSelect.selectedIndex];
  const selectedtournamePrice = +selectedOption.dataset.price;  
  const total = quantityField.value * selectedtournamePrice;
  totalField.value = total || 0;
}

tourSelect.addEventListener('change', calculateTotal)
quantityField.addEventListener('input', calculateTotal)

calculateTotal();

<p class="normalinput">Enter Total Number of Guests:</p>
<input type="number" class="quantity" name="quantity" value="0" required><br />

<select class="normalinput" name="tourname" id="tourname">
  <option data-price="0" value="None">None</option>
  <option data-price="59" value="G0001">Milano Coffee Crawl (Coffee Included) <span>&#8364;       </span>59</option>
  <option data-price="49" value="G0002">Milano Coffee Crawl (Coffee Not Included) <span>&#8364;</span>49</option>
  <option data-price="39" value="G0003">Milano History Walk <span>&#8364;</span>39</option>
  <option data-price="69" value="G0004">Napoli Coffee Crawl (Coffee Included) <span>&#8364;</span>69</option>
  <option data-price="59" value="G0005">Npoli Coffee Crawl (Coffee Not Included) <span>&#8364;</span>59</option>
</select>
<p class="total"> 
  Total: <span>&#8364;</span>
  <input type="text" name="total" id="total" value="0">
</p>