3

入力フィールドを介してテキスト フィールドを動的に更新しようとしています。これは、値を含むドロップダウン選択にリンクされます。また、今日の日付から 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 と Google の例を見てきましたが、私が達成しようとしているものと似たものはないようです。答えがそこにあることは知っていますが、正しい質問をしているかどうかはわかりません。

乾杯

4

1 に答える 1

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関数内での使用はthis、実際にはどの要素でもありません (引数として渡しませんでした)。
  3. が値ではなく入力要素であるamount場合の計算での使用。amount
  4. 使い勝手を考えると、金額が変わったときだけ更新しようとするので、金額の変更と配送の両方で更新したほうがいいと思います。
于 2013-02-12T13:00:45.547 に答える