旅游价格计算器：实现游客数量与线路选择变更时自动更新总价（JS&HTML）

问题描述 #

开发旅游产品价格计算器，需求是总价随旅游线路选择、游客数量变化自动更新。但当前仅在切换旅游线路时能计算并更新总价，修改游客数量时总价完全没反应：

• 先输入游客数量再选线路，总价显示正常
• 后续修改游客数量，总价不会自动刷新，必须重新切换线路再切回原线路才能得到更新后的总价

当前代码 #

HTML 部分 #

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

JavaScript 部分 #

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

解决方案 #

问题根源是游客数量输入框没有绑定触发总价计算的事件，只有下拉菜单的onchange事件能触发计算。以下两种方案都能解决：

方案1：快速修复 - 给数量输入框添加内联事件 #

直接修改数量输入框，添加oninput事件触发计算函数：

<input type="number" class="quantity" name="quantity" value="0" required oninput="populate('tourname')">

方案2：更优解 - 使用事件监听替代内联事件 #

把内联事件移除，改用JS事件监听，代码更易维护，同时给两个元素都绑定计算逻辑：

更新后的 JavaScript

// 获取页面元素
const quantityInput = document.querySelector('input[name="quantity"]');
const tourSelect = document.getElementById('tourname');
const totalInput = document.getElementById('total');

// 定义统一的总价计算函数
function calculateTotal() {
  // 处理非数字输入，默认取0
  const guestCount = parseInt(quantityInput.value) || 0;
  const selectedTourPrice = parseInt(tourSelect.options[tourSelect.selectedIndex].dataset.price) || 0;
  totalInput.value = guestCount * selectedTourPrice;
}

// 给数量输入框和线路选择框绑定事件
quantityInput.addEventListener('input', calculateTotal);
tourSelect.addEventListener('change', calculateTotal);

更新后的 HTML（移除内联事件）

<select class="normalinput" name="tourname" id="tourname">
  <!-- 选项内容保持不变 -->
</select>

额外优化建议 #

• 把总价输入框设置为只读，防止用户手动修改：<input type="text" name="total" id="total" value="0" readonly>
• 给数量输入框添加min="0"属性，避免输入负数：<input type="number" class="quantity" name="quantity" value="0" required min="0">

内容的提问来源于stack exchange，提问作者jonathanallora