Fatal编程技术网
  • javascript/
  • Javascript 计算总价脚本不起作用

Javascript 计算总价脚本不起作用

javascript

Javascript 计算总价脚本不起作用,javascript,calculated-field,subtotal,Javascript,Calculated Field,Subtotal,我想计算总价并在表单底部显示小计，但它不起作用，我不知道为什么 小计应显示减去或添加“prijsvolwassenen”、“Prijskinden”、“prijspeuters”和“prijskamertype”元素后的总价 这是我的剧本 $(document).ready(function calculatePrice(formclear) { //Get selected data var elt = document.getElementById("prijsvolwassene

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

小计应显示减去或添加“prijsvolwassenen”、“Prijskinden”、“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>


沃尔瓦森：
1.
2.
3.
4.
5.
6.
7.
8.
幼儿园（小4-12岁）：
0
1.
2.
3.
4.
5.
6.
7.
幼儿园（0-3年级）：
0
1.
2.
3.
4.
5.
6.
7.
Kamertype：
Selecteer kamertype
克莱恩内斯特
卡朱伊特
卡皮泰因舒特酒店
算计
小计：
您的问题是一个简单的语法错误。 在代码末尾，您有

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

另外，我注意到您没有引用jQuery，因此这也导致了一个错误。在左边，将“No Library（pure JS）”文本框更改为jQuery的一个版本。

您实际上是在混淆内容。您试图使用
documentready
，这是
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>


函数calculatePrice（）{
//获取所选数据
var elt=document.getElementById（“prijsvolwassenen”）；
var volwassenen=elt.options[elt.selectedIndex].value；
var elt=document.getElementById（“prijskinden”）；
var kinden=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；
//将数据转换为整数
volwassenen=parseInt（volwassenen）；
kinderen=parseInt（kinderen）；
peuters=parseInt（peuters）；
kamertype=parseInt（kamertype）；
//计算总价值
var total=volwassenen+kinderen+peuters+kamertype；
//将值打印到PicExtPrice
document.getElementById（“PicExtPrice”）。值=总计；
}

在引用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>
编辑：使用vanilla JS更新答案： 让你的JS像这样：

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

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

更多枯燥的代码

  • 演示：
vanila javascript修复程序
如果您检查浏览器控制台，您将看到以下错误消息：
Uncaught ReferenceError:calculatePrice未定义
。此部分是
jQuery
，使用方式错误：
$（文档）。准备好了吗（
。你的代码中没有任何地方使用
jQuery
，那你为什么要使用这个呢？如果你想使用
jQuery
，你应该参考这个库。我希望你也能在服务器上查价格，因为一些虚拟商店的窃贼知道Javascript。@Marieke Hoog:阅读我所有的答案，看看源代码……然后得到我的答案改掉在发布到堆栈溢出之前检查浏览器控制台是否有这样的小错误的习惯！@MariekeHoog:你的控制台中有错误吗？为什么人们实际上对这个答案投了更高的票？它不能解决问题，而且完全错了。@RichieHindle是的，这一点很重要。控制台是程序员最好的朋友提示：在尝试汇总之前，您应该检查所选内容是否是数字。使用
jQuery
很好，但对于这个问题，它完全没有用。OP使用
普通Javascript
编写所有内容，除了错误声明函数外。它应该保持原样，因为它工作正常ks（在解决了小问题之后）。@MelanciaUK是真的，但是标记有jQuery，因此有一个jQuery答案。我添加了一个普通的答案，应该可以用。@MelanciaUK:OP在他的代码中使用了这个：$（document）。ready（）以错误的方式使用。声明简单函数时出现了一个错误。我认为这很清楚：
$（document）。ready（函数calculatePrice（formclear）
。代码中没有任何其他使用
jQuery
。 
$(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);
});

$(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);
    }
});