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

我希望总价能够自动计算。

Answer 1

您只需要确保在输入完整且有效时就可以调用sum函数（或者在示例中仅为cal）。由于您可能希望限制用户手动设置天数，因此我已经演示了如何以编程方式触发更改事件来实现此目的。当前的惯例是以编程方式将事件附加到元素上，而不是使用内联HTML5事件符号（例如“ onchange=foo”），请参见Why are inline event handler attributes a bad idea in modern semantic 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>

我该如何解决无法正常运行的javascript计算？

1 个答案: