我的 JavaScript 计算器出现问题了，我该如何修复？

Question

问题在于“总价”没有起作用。当我选择“取车日期”和“还车日期”时，它会在输入框中显示值。我必须键入“天数”，然后才能计算出总价。我需要“总价”自动计算。我已经尝试了各种JavaScript事件。这里是我的代码，请帮忙看一下。谢谢。

function sum() {
  var txtFirstNumberValue = document.getElementById('num1').value;
  var txtSecondNumberValue = document.getElementById('numdays2').value;
  var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
  if (!isNaN(result)) {
    document.getElementById('num3').value = result;
  }
}


function GetDays() {
  var dropdt = new Date(document.getElementById("drop_date").value);
  var pickdt = new Date(document.getElementById("pick_date").value);
  return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}

function cal() {
  if (document.getElementById("drop_date")) {
    document.getElementById("numdays2").value = GetDays();
  }
}

<label for="total">Price per day:</label>
<input type="text" name="price" id="num1" onkeyup="sum();" value="3" readonly>

<div id="pickup_date">
  <p><label class="form">Pickup Date:</label>
    <input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()" /></p>
</div>

<div id="dropoff_date">
  <p><label class="form">Dropoff Date:</label>
    <input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()" /></p>
</div>

<div id="reserve_form">
  <div id="numdays"><label class="form">Number of days:</label>
    <input type="text" id="numdays2" name="numdays" oninput="sum();" />

    <label for="total">Total Price (RM)</label>
    <input type="text" name="test" placeholder="Total Price" value="" id="num3">

我希望总价可以自动计算。

- jack98

---

在 calc() 函数中调用 sum();。 - Randy Casburn

Answer 1

你只需要确保你的sum函数（或在示例中，只需使用cal）在输入完整且有效时被调用。由于您可能希望限制用户手动设置天数，我演示了如何通过编程方式触发更改事件来实现此目的。当前的做法是以编程方式附加元素事件，而不是使用内联HTML5事件符号（例如"onchange=foo"），请参见 为什么在现代语义HTML中内联事件处理程序属性是一个坏主意？。 "

function setDate(event) {
    var days = getDays();
    // if the number of days is valid
    if (!isNaN(days)) {
        var nod = document.getElementById("numdays2");
        nod.value = days;
        // programmatically setting a value will not fire a change event
        nod.dispatchEvent(new Event("change"));
    }
}

function getDays() {
    // returns NaN if either date does not hold a valid date
    var dropdt = new Date(document.getElementById("drop_date").value);
    var pickdt = new Date(document.getElementById("pick_date").value);
    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}

function cal() {
    var pricePerDay = document.getElementById("pricePerDay").value;
    if (0 == (pricePerDay = parseInt(pricePerDay))) { return } // TODO needs to handle decimal values
    document.getElementById("total").value = parseInt(document.getElementById("numdays2").value) * pricePerDay;
}

function init() {
    document.getElementById("drop_date").addEventListener("change", setDate);
    document.getElementById("pick_date").addEventListener("change", setDate);
    document.getElementById("numdays2").addEventListener("change", cal);
}

document.addEventListener("DOMContentLoaded", init);

<label for="total">Price per day:</label>
<input type="text" name="price" id="pricePerDay" value="" placeholder="Manually enter a value">

<div id="pickup_date">
  <p><label class="form">Pickup Date:</label>
    <input type="date" class="textbox" id="pick_date" name="pickup_date" /></p>
</div>

<div id="dropoff_date">
  <p><label class="form">Dropoff Date:</label>
    <input type="date" class="textbox" id="drop_date" name="dropoff_date" /></p>
</div>

<div id="reserve_form">
  <div id="numdays"><label class="form">Number of days:</label>
    <!-- numdays2 is readonly to ensure the date pickers are used -->
    <input type="text" id="numdays2" name="numdays" readonly placeholder="Select dates above" />
    <label for="total">Total Price (RM)</label>
    <input id="total" type="text" readonly name="test" placeholder="Total Price" value="" id="num3">
  </div>
</div>

- Tibrogargan

---

感谢Tibrogargan的回复。我已经尝试了这些代码，它们可以正常工作！非常感谢你的帮助！我也明白了它是如何工作的！再次感谢！:D - jack98