通过输入字段和下拉列表动态更新字段

Question

我试图通过输入字段动态更新文本字段。然后这将被链接到具有值的下拉选择。我还需要显示截止日期，从今天的日期提前30天显示。

这里是我的HTML：

<div> 
    <label for="payment">Payment:</label> 
    <input type="text" name="amount" id="amount" onChange="myfunction()"/> 
    <br /><br /> 
    <label for="delivery">Delivery:</label> 
    <select id="delivery" name="delivery"> 
     <option value="1">Fast</option> 
     <option value="2">Medium</option> 
     <option value="3">Slow</option> 
    </select>  
</div> 
<br /> 
<div> 
Payment Breakdown: <br /><br /> 
Payment: 
<div name="amount" id="amount"></div> 
Freight: 
<div name="delivery" id="delivery"></div> 
Total Payment: 
<div name="total" id="total"></div> 
Due Date:  
<div name="date" id="date"></div>  
</div> 

我使用JavaScript一部分，尽管挣扎，这一切配合在一起。

我已经得到这个，现在我卡住了。 （不是很远我知道）

function myFunction() 
{ 
var amount = document.getElementById("amount"); 
var delivery = parseInt($(this).find("option:selected").val()); 
total = amount + delivery 
$("#total").html(total); 
}; 

我已经看了Stackoverflow和谷歌上的例子，但似乎没有什么我试图实现。虽然我知道答案在那里，但我不确定我是否在问正确的问题。

干杯

Answer 1

我会改变它到这个。在这里，我有一个updateCost()函数，当数量发生变化或交付发生变化时会调用它。我还添加了代码来处理截止日期。

从量删除内联onchange事件：

<input type="text" name="amount" id="amount"/> 

的Javascript：

function updateCost() 
{ 
    var amount = $('#amount').val(); 
    var delivery = parseInt($('#delivery').val()); 

    var total = amount + delivery 
    $("#total").html(total); 
    $("#amountdiv").html(amount); 
    $("#deliverydiv").html(delivery); 

    // handle the due date 
    var todayPlus30 = new Date(); 
    todayPlus30.setDate(todayPlus30.getDate()+30); 
    var dateStr = todayPlus30.getDate() + "/" + (todayPlus30.getMonth()+1) + "/" + todayPlus30.getFullYear(); 

    $('#date').html(dateStr); 
} 

$(document).ready(function(){ 
    $('#amount').change(function(){ updateCost(); }); 
    $('#delivery').change(function(){ updateCost(); }); 
}); 

你的原代码有几个问题：

1. 内联函数的错案致电
2. 使用当函数this实际上不是您的任何元素（您没有将它作为参数传递）时，函数内部的函数为。
3. 当amount是输入元素而非值时，在计算中使用amount。
4. 从可用性的角度来看，它只会在数量发生变化时尝试更新，我认为最好更新数量和交付的更改。