javascript - 合計価格の計算スクリプトが機能しない

Question

合計金額を計算し、フォームの下部に小計を表示したいのですが、うまくいきません。理由がわかりません。

小計は、要素「prijsvolwassenen」、「prijskinderen」、「prijspeuters」、および「prijskamertype」の減算または加算後の合計価格を表示する必要があります。

ここでフィドル

これは私のスクリプトです

$(document).ready(function calculatePrice(formclear) {

 //Get selected data  
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;

var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;

var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;

var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;

//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);

//calculate total value  
var total = volwassenen+kinderen+peuters+kamertype; 

//print value to  PicExtPrice 
document.getElementById("PicExtPrice").value=total;

}
}

HTML は次のとおりです。

   <form name="formclear" action="" method="post" id="bootstrap-frm">   
 <label>
    <span>Volwassenen :</span>
        <select class="autowidthselect" name="prijsvolwassenen" onChange="calculatePrice()" id="prijsvolwassenen">
            <option value="-50">1</option>
            <option selected="selected" value="0">2</option>
            <option value="50">3</option>
            <option value="100">4</option>
            <option value="150">5</option>
            <option value="200">6</option>
            <option value="250">7</option>
            <option value="300">8</option>
    </select>
</label>  

<label>
    <span>Kinderen (4-12 jr) :</span>
        <select class="autowidthselect" name="prijskinderen" onChange="calculatePrice()" id="prijskinderen">
            <option value="-50">0</option>
            <option value="-25">1</option>
            <option selected="selected" value="0">2</option>
            <option value="25">3</option>
            <option value="50">4</option>
            <option value="75">5</option>
            <option value="100">6</option>
            <option value="125">7</option>
        </select>
</label>

<label>
    <span>Kinderen (0-3 jr) :</span>
        <select class="autowidthselect" name="prijspeuters" onChange="calculatePrice()" id="prijspeuters">
            <option selected="selected" value="0">0</option>
            <option value="15">1</option>
            <option value="30">2</option>
            <option value="45">3</option>
            <option value="60">4</option>
            <option value="75">5</option>
            <option value="90">6</option>
            <option value="105">7</option>
        </select>
</label>

<label>
    <span> Kamertype :</span>
        <select class="autowidthselect" name="prijskamertype" onChange="calculatePrice()" id="prijskamertype">
            <option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
            <option value="295">Kraaiennest</option>
            <option value="395">Kajuit</option>
            <option value="495">Kapiteinshut</option>
        </select>
</label>

<label>
    <button type="button" onclick="calculatePrice()">Calculate</button>
</label>

<label>
    <span>Subtotaal: </span>
        <input id="PicExtPrice" type="text" size="10"/>
</label>

 </form>

Answer 1

jQuery を参照するときは、jQuery をもっと活用する必要があります (ちなみに、これをフィドルで行うのを忘れていました)。あなたが達成したいと思うのは、次のようなものです。

フィドル

HTML

<form name="formclear" action="" method="post" id="bootstrap-frm">
    <label> <span>Volwassenen :</span>

        <select class="autowidthselect" name="prijsvolwassenen" id="prijsvolwassenen">
            <option value="-50">1</option>
            <option selected="selected" value="0">2</option>
            <option value="50">3</option>
            <option value="100">4</option>
            <option value="150">5</option>
            <option value="200">6</option>
            <option value="250">7</option>
            <option value="300">8</option>
        </select>
    </label>
    <label> <span>Kinderen (4-12 jr) :</span>

        <select class="autowidthselect" name="prijskinderen" id="prijskinderen">
            <option value="-50">0</option>
            <option value="-25">1</option>
            <option selected="selected" value="0">2</option>
            <option value="25">3</option>
            <option value="50">4</option>
            <option value="75">5</option>
            <option value="100">6</option>
            <option value="125">7</option>
        </select>
    </label>
    <label> <span>Kinderen (0-3 jr) :</span>

        <select class="autowidthselect" name="prijspeuters" id="prijspeuters">
            <option selected="selected" value="0">0</option>
            <option value="15">1</option>
            <option value="30">2</option>
            <option value="45">3</option>
            <option value="60">4</option>
            <option value="75">5</option>
            <option value="90">6</option>
            <option value="105">7</option>
        </select>
    </label>
    <label> <span> Kamertype :</span>

        <select class="autowidthselect" name="prijskamertype" id="prijskamertype">
            <option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
            <option value="295">Kraaiennest</option>
            <option value="395">Kajuit</option>
            <option value="495">Kapiteinshut</option>
        </select>
    </label>
    <label> <span>Subtotaal: </span>

        <input id="PicExtPrice" type="text" size="10" />
    </label>
</form>

JS

$(document).ready(function () {
    $("select").on("change", function () {
        CalculatePrice();
    });
    $("#CalculatePrice").on("click", function () {
        CalculatePrice();
    });
});

function CalculatePrice() 
{
    var pv = parseInt($("#prijsvolwassenen").val(), 10);
    var pk = parseInt($("#prijskinderen").val(), 10);
    var pp = parseInt($("#prijspeuters").val(), 10);
    var pkt = parseInt($("#prijskamertype").val(), 10);

    if (!isNaN(pkt))
        $("#PicExtPrice").val(pv+pk+pp+pkt);
}

編集: バニラ JS を使用して更新された回答: JS を次のようにします。

JS

function calculatePrice() {
            //Get selected data  
            var elt = document.getElementById("prijsvolwassenen");
            var volwassenen = elt.options[elt.selectedIndex].value;

            var elt = document.getElementById("prijskinderen");
            var kinderen = elt.options[elt.selectedIndex].value;

            var elt = document.getElementById("prijspeuters");
            var peuters = elt.options[elt.selectedIndex].value;

            var elt = document.getElementById("prijskamertype");
            var kamertype = elt.options[elt.selectedIndex].value;

            //convert data to integers
            volwassenen = parseInt(volwassenen);
            kinderen = parseInt(kinderen);
            peuters = parseInt(peuters);
            kamertype = parseInt(kamertype);

            //check if each value is a number and calculate total value
            if (!isNaN(volwassenen) && !isNaN(kinderen) && !isNaN(peuters) && !isNaN(kamertype)) {
                var total = volwassenen + kinderen + peuters + kamertype;

                //print value to  PicExtPrice 
                document.getElementById("PicExtPrice").value = total;
            }
        }

バニラ・フィドル

Answer 2

あなたの問題は単純な構文エラーです。コードの最後に、

}
}

1つ目は}関数を閉じますが、2 つ目}はエラーを引き起こしています。)準備完了関数を閉じるには、 a に置き換えてみてください。

また、jQuery を参照していないことに気付きました。これもエラーの原因です。左側で、「No-Library (pure JS)」というテキスト ボックスを jQuery のバージョンに変更します。

Answer 3

あなたは実際にそこで物事を混同しています。document ready実際には関数を宣言する必要があるときに、それをライブラリの一部jQuery(コードのどこにもロードも使用もしていません)を使用しようとしました。

このスクリプトはあなたのために働くはずです：

<head>
    <script type="text/javascript">
        function calculatePrice() {
            //Get selected data  
            var elt = document.getElementById("prijsvolwassenen");
            var volwassenen = elt.options[elt.selectedIndex].value;
            var elt = document.getElementById("prijskinderen");
            var kinderen = elt.options[elt.selectedIndex].value;
            var elt = document.getElementById("prijspeuters");
            var peuters = elt.options[elt.selectedIndex].value;
            var elt = document.getElementById("prijskamertype");
            var kamertype = elt.options[elt.selectedIndex].value;

            //convert data to integers
            volwassenen = parseInt(volwassenen);
            kinderen = parseInt(kinderen);
            peuters = parseInt(peuters);
            kamertype = parseInt(kamertype);

            //calculate total value  
            var total = volwassenen + kinderen + peuters + kamertype;

            //print value to  PicExtPrice 
            document.getElementById("PicExtPrice").value = total;
        }
    </script>
</head>

デモ

Answer 4

より多くの DRY コードhttp://jsfiddle.net/B6mPP/6/

$(function(){
    var fields = $('#prijsvolwassenen,#prijskinderen,#prijspeuters,#prijskamertype'), 
        total = $('#PicExtPrice');

    function calculateTotal(){
        var sum = 0;
        fields.each(function(){
            var value = parseInt($(this).val());
            value == value && (sum += value);
        })
        total.val(sum);            
    };

    fields.change(calculateTotal);
    $('#calculate').click(calculateTotal);
});

Answer 5

• デモ: https://so.lucafilosofi.com/calculate-total-price-script-not-working/

$(function(){
    $('.autowidthselect').on('change', function(){
        calculatePrice();    
    });

    $('button').on('click', function(){
        calculatePrice();
        return false;
    });

    function calculatePrice() {
        var total = 0;
        $('.autowidthselect').each(function(){
            total += !isNaN(this.value) ? parseInt(this.value) : 0;
        });
        $("#PicExtPrice").val(total);
    }
});

バニラのJavaScript修正

• http://jsfiddle.net/B6mPP/10/