Javascript函數打印到相同的跨度元素

初學者Javascript學生，並堅持在希望簡單的東西。Javascript函數打印到相同的跨度元素

我有兩個JavaScript函數可以按預期工作，但它們都打印到相同的Span元素，即使它們具有不同的ID。

在SO或Google的任何地方找不到解決方案。

對不起，這是很多的代碼，不知道如何顯示它。

任何幫助是非常讚賞，歡呼聲如此！

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： - 實際上是相同的，但不同的變種值。

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

來源

2016-10-01 KrnRbts

*「對不起，這是很多代碼，不知道如何顯示它。」*嘗試。請參閱：[MCVE] –

showSpan是全局變量，儘量this.showSpan –

@MarekJanoud可惜沒，都還算到第二SPAN元素，但由於配置 – KrnRbts

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 

// ... 
}

添加一個逗號給你的兩個方法，你都設置好了。

更新小提琴：https://jsfiddle.net/dmeztkr0/1/

這裏有一個關於JavaScript的自動分號插入規則的一些信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion

來源

2016-10-01 11:07:37 xorspark

哇，我不能相信這是問題，但感謝你的時間和信息一堆:) – KrnRbts

您可以使用您傳遞給該函數的配置對象以允許重用。這是利用JavaScript中的閉包優勢，它將鎖定事件偵聽器周圍的環境，以便您可以單獨使用它們。

我也做的東西一點點的重構是沒有必要的

function calculateSubTotal(config) { 
 
    var 
 
    adultCount = document.getElementById("adultCount" + config.type), 
 
    childCount = document.getElementById("childCount" + config.type), 
 
    infantCount = document.getElementById("infantCount" + config.type), 
 
    showSpan = document.getElementById('subTotal' + config.type), 
 
    adultCost = config.cost.adult, 
 
    childCost = config.cost.child, 
 
    infantCost = config.cost.infant; 
 
    
 
    // you don't need to wrap these events, you can just call 
 
    // getSubTotal directly on change 
 
    adultCount.addEventListener('change', getSubTotal); 
 
    childCount.addEventListener('change', getSubTotal);  
 
    infantCount.addEventListener('change', getSubTotal); 
 

 
    //calculates the subtotal for the current service 
 
    function getSubTotal() { 
 
    var 
 
     adultSubTotal = adultCount.value * config.cost.adult, 
 
     childSubTotal = childCount.value * config.cost.child, 
 
     infantSubTotal = infantCount.value * config.cost.infant, 
 
     subTotal = adultSubTotal + childSubTotal + infantSubTotal; 
 
    
 
    showSpan.innerHTML = '$' + subTotal + ' ' + '(ex-GST)'; 
 
    } 
 
} 
 

 
// init the total for helicopters passing in a config object 
 
calculateSubTotal({ 
 
    type: 'Heli', 
 
    cost: { 
 
    adult: 230, 
 
    child: 160, 
 
    infant: 0 
 
    } 
 
}) 
 

 
// init the total for the other thing 
 
calculateSubTotal({ 
 
    type: 'OtherThing', 
 
    cost: { 
 
    adult: 430, 
 
    child: 160, 
 
    infant: 0 
 
    } 
 
})

來源

2016-10-01 11:06:46 synthet1c

是有點出乎我的ATM，但感謝您抽出時間來幫助:) – KrnRbts

你缺乏一個逗號

infantCostHeli = 0

所以JS引擎是把後一個 ';'之後。下一行是：

showSpan = document.getElementById('subTotalHelicopter');

將被解釋爲一個新的，單獨的語句：所以showSpan聲明缺乏「變種」標識：所以現在showSpan變量是一個全局變量，附加到window對象。

可悲的是，在與infantCostFW變量的第二函數存在同樣的錯誤：

infantCostFW = 0

因此，第二個功能也引用該全局變量而不是局部範圍的，新創建的「showSpan」變種。

所以調用calculateFWSubTotal（）覆蓋showSpan全局變量的值，然後這兩種方法使用VAR當連接監聽器來改變事件的一些DOM節點火災。第一個函數內部的事件處理程序的calculateHeliSubTotal（）解僱後，他們消耗的全局變量，這樣就定義爲showSpan

showSpan = document.getElementById('subTotalHelicopter');

事實不要緊，裏面calculateHeliSubTotal定義的事件監聽器（）

只要在變量之後添加一個逗號就可以了。使用像Eslint或JSlint這樣的棉絨將爲您節省很多類似的問題。

此外，還有在你的代碼了很多口是心非的，而且計算值和註冊事件處理的邏輯真的耦合。我認爲你會在代碼審查堆棧交換中發佈它並尋求一些建議。

來源

2016-10-01 11:08:58 Sergeon

感謝所有的信息謝爾頓:) – KrnRbts

Javascript函數打印到相同的跨度元素

回答

相關問題