【问题标题】：Calculate total price script not working计算总价脚本不起作用
【发布时间】：2014-06-04 13:41:46
【问题描述】：

我想计算总价并在表格底部显示小计，但它不起作用，我不知道为什么。

小计应显示减去或添加元素“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>

【问题讨论】：

如果您检查浏览器控制台，您会看到以下错误消息：Uncaught ReferenceError: calculatePrice is not defined。
这部分是jQuery，它被错误地使用了：$(document).ready(。您没有在代码中的任何地方使用jQuery，那么您为什么要尝试使用它呢？如果你打算使用jQuery，你应该参考这个库。
我希望你也可以在服务器上查看价格，因为有些虚拟商店小偷知道 Javascript。
@Marieke Hoog：阅读我所有的答案并查看源代码...

标签： javascript calculated-field subtotal

【解决方案1】：

你实际上是在混淆那里的东西。您尝试使用 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>

Demo

【讨论】：

提示：你应该在尝试总结之前检查选择的是否是数字。

【解决方案2】：

您的问题是一个简单的语法错误。在代码的末尾，您有

}
}

第一个} 关闭函数，但第二个} 导致错误。尝试将其替换为) 以关闭就绪功能。

另外，我注意到您没有引用 jQuery，所以这也会导致错误。在左侧，将显示“No-Library (pure JS)”的文本框更改为 jQuery 版本。

【讨论】：

...然后养成在发布到 Stack Overflow 之前检查浏览器控制台是否存在此类琐碎错误的习惯！
@MariekeHoog：你的控制台有错误吗？
为什么人们实际上赞成这个答案？它没有解决问题，而且完全错误。
@RichieHindle 是的，这很重要。控制台是程序员最好的朋友，它可以节省大量时间。

【解决方案3】：

在引用它时你应该更多地使用 jQuery（顺便说一句，你忘了在你的小提琴中这样做）。我认为你想要实现的是这样的：

FIDDLE

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;
            }
        }

VANILLA FIDDLE

【讨论】：

使用jQuery 很好，但对于这个问题，它完全没用。 OP 使用Vanilla Javascript 编写了所有内容，除了声明函数的错误。它应该保持原样，因为它可以工作（在解决小问题之后）。
@MelanciaUK 是的，但标签有 jQuery，因此有一个 jQuery 答案。我添加了一个应该有效的香草答案。
@MelanciaUK：OP 在他的代码中使用了这个：$(document).ready()
以错误的方式使用。声明简单函数时出错。我认为这很清楚：$(document).ready(function calculatePrice(formclear)。并且代码中没有其他任何 jQuery 用法。

【解决方案4】：

更多干码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);
});

【讨论】：

【解决方案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);
    }
});

vanila javascript 修复

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

【讨论】：