Javascript 函数打印到相同的 Span 元素

Question

初学者 Javascript 学生，并坚持一些希望简单的东西。

我有两个 javascript 函数，它们按预期工作，但它们都打印到相同的 Span 元素，即使它们具有不同的 ID。

无法在 SO 或 google 上找到解决方案。

抱歉，代码太多，不知道如何显示。

https://jsfiddle.net/KrnRbts/dmeztkr0/

非常感谢任何帮助，干杯!

JavaScript 1:

function calculateHeliSubTotal() {
    var adultCountHeli = document.getElementById("adultCountHelicopter"),
        childCountHeli = document.getElementById("childCountHelicopter"),
        infantCountHeli = document.getElementById("infantCountHelicopter"),
        adultCostHeli = 230,
        childCostHeli = 160,
        infantCostHeli = 0
    showSpan = document.getElementById('subTotalHelicopter');

    //changes the sub-total if the User changes the adult quantity
    function runAdultCountHeliEvent() {
        adultCountHeli.addEventListener('change', function () {
            getHeliSubTotal();
        });
    }

    //changes the sub-total if the User changes the child quantity
    function runChildCountHeliEvent() {
        childCountHeli.addEventListener('change', function () {
            getHeliSubTotal();
        });
    }

    //changes the sub-total if the User changes the infant quantity
    function runInfantCountHeliEvent() {
        infantCountHeli.addEventListener('change', function () {
            getHeliSubTotal();
        });
    }

    //calls to run the functions
    getHeliSubTotal();

    //a function that is used to run all of the events
    function runHeliEvents() {
        runAdultCountHeliEvent();
        runChildCountHeliEvent();
        runInfantCountHeliEvent();
    }

    //calls to run the functions
    runHeliEvents();

    //calculates the subtotal for the current service
    function getHeliSubTotal() {
        var adultHeliSubTotal = adultCountHeli.value * adultCostHeli,
            childHeliSubTotal = childCountHeli.value * childCostHeli,
            infantHeliSubTotal = infantCountHeli.value * infantCostHeli
        heliSubTotal = adultHeliSubTotal + childHeliSubTotal + infantHeliSubTotal;
        showSpan.innerHTML = '$' + heliSubTotal + ' ' + '(ex-GST)';
    }

}

calculateHeliSubTotal();

JAVASCRIPT 2: - 几乎相同但不同的 var 值。

function calculateFWSubTotal() {
    var adultCountFW = document.getElementById("adultCountFixedWing"),
        childCountFW = document.getElementById("childCountFixedWing"),
        infantCountFW = document.getElementById("infantCountFixedWing"),
        adultCostFW = 530,
        childCostFW = 260,
        infantCostFW = 0
    showSpan = document.getElementById('subTotalFixedWing');

    //changes the sub-total if the User changes the adult quantity
    function runAdultCountFWEvent() {
        adultCountFW.addEventListener('change', function () {
            getFWSubTotal();
        });
    }

    //changes the sub-total if the User changes the child quantity
    function runChildCountFWEvent() {
        childCountFW.addEventListener('change', function () {
            getFWSubTotal();
        });
    }

    //changes the sub-total if the User changes the infant quantity
    function runInfantCountFWEvent() {
        infantCountFW.addEventListener('change', function () {
            getFWSubTotal();
        });
    }

    //calls to run the functions
    getFWSubTotal();

    //a function that is used to run all of the events
    function runFWEvents() {
        runAdultCountFWEvent();
        runChildCountFWEvent();
        runInfantCountFWEvent();
    }

    //calls to run the functions
    runFWEvents();

    //calculates the subtotal for the current service
    function getFWSubTotal() {
        var adultFWSubTotal = adultCountFW.value * adultCostFW,
            childFWSubTotal = childCountFW.value * childCostFW,
            infantFWSubTotal = infantCountFW.value * infantCostFW
        FWSubTotal = adultFWSubTotal + childFWSubTotal + infantFWSubTotal;
        showSpan.innerHTML = '$' + FWSubTotal + ' ' + '(ex-GST)';
    }

}

calculateFWSubTotal();

Answer 1

showSpan 在变量声明中是全局的，因为缺少逗号。

function calculateHeliSubTotal() {
  var adultCountHeli = document.getElementById("adultCountHelicopter"),
    childCountHeli = document.getElementById("childCountHelicopter"),
    infantCountHeli = document.getElementById("infantCountHelicopter"),
    adultCostHeli = 230,
    childCostHeli = 160,
    infantCostHeli = 0 // no comma, so a semicolon is automatically inserted
  showSpan = document.getElementById('subTotalHelicopter'); //global
// ...
}

function calculateFWSubTotal() {
  var adultCountFW = document.getElementById("adultCountFixedWing"),
    childCountFW = document.getElementById("childCountFixedWing"),
    infantCountFW = document.getElementById("infantCountFixedWing"),
    adultCostFW = 530,
    childCostFW = 260,
    infantCostFW = 0 //no comma, so javascript inserts a semicolon
  showSpan = document.getElementById('subTotalFixedWing'); //showSpan is overwritten

// ...
}

在这两个方法中添加一个逗号即可完成。

更新的 fiddle :https://jsfiddle.net/dmeztkr0/1/

以下是有关 JavaScript 自动分号插入规则的一些信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion