函數沒有定義，但我很確定我定義了它..我錯過了什麼？

Question

我正在嘗試使用HTML & JavaScript製作表單。 我定義了很多功能，但其中一個給了我一些錯誤，說功能沒有定義..我很確定，雖然我定義了他們..也許我錯過了什麼地方或我錯誤地定義了他們？不太清楚問題出在哪裏！

我得到的錯誤是：

未捕獲的ReferenceError

：selectedBinding沒有定義

未捕獲的ReferenceError：selectedStaples沒有定義

未捕獲的ReferenceError：selectedHoles沒有定義

也許你們可以檢查我的代碼並尋找我找不到的錯誤？

var elems = { 
 
    staplesSelect: document.getElementById("makingStaples"), 
 
    holeSelect: document.getElementById("makingHoles"), 
 
    bindingSelect: document.getElementById("makingBinding"), 
 
    amountOfSetsResults: document.getElementById("amountOfSetsResults"), 
 
    amountOfPagesResults: document.getElementById("amountOfPagesResults"), 
 
    binding: document.getElementById("binding"), 
 
    stapling: document.getElementById("stapling"), 
 
    holes: document.getElementById("holes"), 
 
    paperWeight: document.getElementById("paperWeight"), 
 
    bindingResults: document.getElementById("bindingResults"), 
 
    holesResults: document.getElementById("holesResults"), 
 
    staplingResults: document.getElementById("staplingResults"), 
 
    totalAmountOfPagesResults: document.getElementById("totalAmountOfPagesResults"), 
 
    paperWeightResults: document.getElementById("paperWeightResults"), 
 
    bindingMethod: document.getElementById("bindingMethod"), 
 
    staplingMethod: document.getElementById("staplingMethod"), 
 
    holesMethod: document.getElementById("holesMethod"), 
 
    doubleSided: document.getElementById("doubleSided"), 
 
    pricePaperWeightResults: document.getElementById("pricePaperWeightResults"), 
 
    blackAndWhite: document.getElementById("blackAndWhite"), 
 
    colorResults: document.getElementById("colorResults"), 
 
    totalPricePrints: document.getElementById("totalPricePrints"), 
 
    totalPrice: document.getElementById("totalPrice"), 
 
    pricePerPageResults: document.getElementById("pricePerPageResults"), 
 
    calculation: document.getElementById("calculation"), 
 
    calculate: document.getElementById("calculate"), 
 
    amountOfSetsInput: document.getElementById("amountOfSetsInput"), 
 
    amountOfPagesInput: document.getElementById("amountOfPagesInput") 
 
} 
 

 
// Hiding calculations from page 
 
toggleVisibility(elems.calculation, true); 
 

 
// Defining the color prints pricelist 
 
var priceListColor = { 
 
    0: 0.8, 
 
    10: 0.7, 
 
    25: 0.6, 
 
    50: 0.5, 
 
    100: 0.4, 
 
    250: 0.35, 
 
    500: 0.3, 
 
    1000: 0.25, 
 
    2000: 0.2, 
 
    5000: 0.18 
 
} 
 
// Defining the black and white pricelist 
 
var priceListBlackAndWhite = { 
 
    0: 0.1, 
 
    10: 0.09, 
 
    25: 0.08, 
 
    50: 0.07, 
 
    100: 0.06, 
 
    500: 0.05, 
 
    1000: 0.045, 
 
    5000: 0.04 
 
} 
 

 
// Defining the pricelist for paperweight 
 
var priceListPaperWeight = { 
 
    80: 0, 
 
    120: 0.05, 
 
    160: 0.1, 
 
    190: 0.15, 
 
    210: 0.2, 
 
    250: 0.25, 
 
    280: 0.3, 
 
    300: 0.35, 
 
    350: 0.4, 
 
    351: 0 
 
} 
 

 
// Defining the pricelist for binding 
 
var priceListBinding = { 
 
    0: 3, 
 
    10: 2.75, 
 
    25: 2.5 
 
} 
 

 
// Defining the pricelist for stapling 
 
var priceListStaples = { 
 
    0: 0.15, 
 
    100: 0.12, 
 
    250: 0.10, 
 
    500: 0.08 
 
} 
 

 
// Defining the pricelist for stapling 
 
var priceListHoles = { 
 
    0: 0.15, 
 
    100: 0.12, 
 
    250: 0.10, 
 
    500: 0.08 
 
} 
 

 
// Getting the value for the amount of pages given in by user 
 
function finalAmountOfPages() { 
 
    var totalAmountOfSets = elems.amountOfSetsInput.value || 0; 
 
    var totalAmountOfPages = elems.amountOfPagesInput.value || 0; 
 

 
    // Validation process, returns true or false; if true we proceed 
 
    if (validateForm(totalAmountOfSets, totalAmountOfPages)) { 
 
    totalAmountOfPages = parseInt(totalAmountOfPages); 
 
    totalAmountOfSets = parseInt(totalAmountOfSets); 
 

 
    // Calculating total amount of pages 
 
    var finalPagesAmount = totalAmountOfPages * totalAmountOfSets; 
 

 
    // Calculating price per page 
 
    var pricePerColorPage = findPricePerColorPage(finalPagesAmount, 0); 
 
    var pricePerBlackAndWhitePage = findPricePerBlackAndWhitePage(finalPagesAmount, 0); 
 
    var totalPriceColorPrinting = (totalAmountOfPages * totalAmountOfSets) * pricePerColorPage; 
 
    var totalPriceBlackAndWhitePrinting = (totalAmountOfPages * totalAmountOfSets) * pricePerBlackAndWhitePage; 
 

 
    // Calculating price for binding 
 
    var bindingPrice = findBindingPrice(totalAmountOfSets, 0); 
 
    var totalBindingPrice = totalAmountOfSets * bindingPrice; 
 

 
    // Calculating price for paper weight 
 
    var paperWeightPricePerPage = findPaperWeightPrice(paperWeight, 0) 
 
    var totalPricePaper = (totalAmountOfSets * totalAmountOfPages) * paperWeightPricePerPage; 
 
    var totalPricePaperDoubleSided = (totalAmountOfSets * (totalAmountOfPages/2)) * paperWeightPricePerPage; 
 

 
    // Setting the startup costs 
 
    var startUpCosts = 2.95; 
 

 
    // Calculation price for stapling and making holes 
 
    var staplePrice = findStaplePrice(totalAmountOfSets, 0); 
 
    var holesPrice = findHolesPrice(totalAmountOfSets, 0); 
 
    var totalStaplePrice = totalAmountOfSets * staplePrice; 
 
    var totalHolesPrice = totalAmountOfSets * holesPrice; 
 

 
    // Calculating total price 
 
    var totalColorPrice = totalPriceColorPrinting + totalPricePaper + totalBindingPrice + startUpCosts || 0; 
 
    var totalBlackAndWhitePrice = totalPriceBlackAndWhitePrinting + totalPricePaper + totalBindingPrice + startUpCosts || 0; 
 

 

 
    // Calling the updateView function 
 
    //COMMENT 8 first see COMMENT 7. Instead of passing a list of parametres, pass an object 
 
    /* updateView({ 
 
      totalAmountOfSets : totalAmountOfSets, 
 
      totalAmountOfPages: totalAmountOfPages 
 
    })*/ 
 
    updateView({ 
 
     totalAmountOfSets: totalAmountOfSets, 
 
     totalAmountOfPages: totalAmountOfPages, 
 
     totalColorPrice: totalColorPrice, 
 
     totalBlackAndWhitePrice: totalBlackAndWhitePrice, 
 
     pricePerColorPage: pricePerColorPage, 
 
     pricePerBlackAndWhitePage: pricePerBlackAndWhitePage, 
 
     paperWeightPricePerPage: paperWeightPricePerPage, 
 
     totalPricePaper: totalPricePaper, 
 
     totalPricePaperDoubleSided: totalPricePaperDoubleSided, 
 
     bindingPrice: bindingPrice, 
 
     totalBindingPrice: totalBindingPrice, 
 
     totalPriceBlackAndWhitePrinting: totalPriceBlackAndWhitePrinting, 
 
     totalPriceColorPrinting: totalPriceColorPrinting, 
 
     startUpCosts: startUpCosts, 
 
     totalHolesPrice: totalHolesPrice, 
 
     totalStaplePrice: totalStaplePrice 
 
    }); 
 

 
    // Calling the function the show the calculation table 
 
    showCalculation(); 
 
    } 
 
} 
 

 

 
//COMMENT 7 Instead of "geen" it's better to use "0". I understand that you use it as a value for the resulting offerte so let's save this thing for the next iteration. The best practice is to separate the labels from the values and keep values in an "international form", sometimes numeric. So if the user selects option with value 2, you have somewhere an object where you see that number 2 corresponds to "Color black" and then you show the words "Color black" in the offerte. So in the future we'll rewrite it this way. 
 

 
function toggleVisibility(selector, hide){ 
 
    var showStyle = hide ? "none" : ""; 
 
    selector.style.display = showStyle; 
 
} 
 

 
// Defining a function to hide 'makingStaples' and 'makingHoles' when binding is different from "geen" 
 
function toggleBinding(){ 
 
    if (getValue(selectedBinding) !== "geen") { 
 
    toggleVisibility(elems.staplesSelect, true); 
 
    toggleVisibility(elems.holeSelect, true); 
 
    } else { 
 
    toggleVisibility(elems.staplesSelect, false); 
 
    toggleVisibility(elems.holeSelect, false); 
 
    } 
 
} 
 

 
// Defining a function to hide 'makingBinding' and 'makingHoles' when staples is different from "geen" 
 
function toggleStapling(){ 
 
    if (getValue(selectedStaples) !== "geen") { 
 
    toggleVisibility(elems.bindingSelect, true); 
 
    toggleVisibility(elems.holeSelect, true); 
 
    } else { 
 
    toggleVisibility(elems.bindingSelect, false); 
 
    toggleVisibility(elems.holeSelect, false); 
 
    } 
 
} 
 

 
// Defining a function to hide 'makingStaples' and 'makingBinding' when holes is different from "geen" 
 
function toggleHoles(){ 
 
    if (getValue(selectedHoles) !== "geen") { 
 
    toggleVisibility(elems.staplesSelect, true); 
 
    toggleVisibility(elems.bindingSelect, true); 
 
    } else { 
 
    toggleVisibility(elems.staplesSelect, false); 
 
    toggleVisibility(elems.bindingSelect, false); 
 
    } 
 
} 
 

 
// Function to show the calculation table after pressing the button 
 
function showCalculation() { 
 
    toggleVisibility(elems.calculation, false); 
 
} 
 

 
// Defining a function to validate all fields 
 
function validateForm(totalAmountOfSets, totalAmountOfPages) { 
 
    elems.amountOfSetsResults.innerHTML = ""; 
 
    elems.amountOfPagesResults.innerHTML = ""; 
 
    // Validating the input fields 
 
    if (!totalAmountOfPages || isNaN(totalAmountOfPages) || totalAmountOfPages <= 0) { 
 
    elems.amountOfPagesResults.innerHTML = "Controleer uw invoer!"; 
 
    return false; //validation not passed 
 
    } else if (!totalAmountOfSets || isNaN(totalAmountOfSets) || totalAmountOfSets <= 0) { 
 
    elems.amountOfSetsResults.innerHTML = "Controleer uw invoer!"; 
 
    return false; //validation not passed 
 
    } else { 
 
    return true; //validation passed 
 
    } 
 
} 
 

 
// Defining a price per page for color prints 
 
function findPricePerColorPage(numberOfPages, initialNumber) { 
 
    pricePerColorPage = initialNumber; 
 
    for (var amount in priceListColor) { 
 
    if (numberOfPages > amount) { 
 
     pricePerColorPage = priceListColor[amount] 
 
    } 
 
    } 
 
    return pricePerColorPage; 
 
} 
 

 
// Defining a price per page for black and white prints 
 
function findPricePerBlackAndWhitePage(numberOfPages, initialNumber) { 
 
    pricePerBlackAndWhitePage = initialNumber; 
 
    for (var amount in priceListBlackAndWhite) { 
 
    if (numberOfPages > amount) { 
 
     pricePerBlackAndWhitePage = priceListBlackAndWhite[amount] 
 
    } 
 
    }  
 
    return pricePerBlackAndWhitePage; 
 
} 
 

 
/* Getting the binding value 
 
function getBinding(selectedBinding) { 
 
    var b = elems.binding; 
 
    var selectedBinding = b.options[b.selectedIndex].value; 
 
    return selectedBinding; 
 
} 
 

 
// Getting the holes value 
 
function getHoles(selectedHoles) { 
 
    var h = elems.holes; 
 
    var selectedHoles = h.options[h.selectedIndex].value; 
 
    return selectedHoles; 
 
} 
 

 

 
// Getting the paper weight value 
 
function getPaperWeight(selectedPaperWeight) { 
 
    var pW = elems.paperWeight; 
 
    var selectedPaperWeight = pW.options[pW.selectedIndex].value; 
 
    return selectedPaperWeight; 
 
} 
 
*/ 
 

 
// Getting the text from staples, holes, binding and paperweight 
 
function getText(textBinding, textStapling, textHoles, textPaperWeight) { 
 
    var b = elems.binding; 
 
    var s = elems.stapling; 
 
    var h = elems.holes; 
 
    var p = elems.paperWeight; 
 
    var textBinding = b.options[b.selectedIndex].text; 
 
    var textStapling = s.options[s.selectedIndex].text; 
 
    var textHoles = h.options[h.selectedIndex].text; 
 
    var textPaperWeight = p.options[p.selectedIndex].text; 
 
    return textBinding, textStapling, textHoles, textPaperWeight; 
 
} 
 

 
// Getting the value from staples, holes, binding and paperweight 
 
function getValue(selectedStapling, selectedBinding, selectedHoles, selectedPaperWeight) { 
 
    var b = elems.binding; 
 
    var s = elems.stapling; 
 
    var h = elems.holes; 
 
    var p = elems.paperWeight; 
 
    var selectedStapling = s.options[s.selectedIndex].value; 
 
    var selectedBinding = b.options[b.selectedIndex].value; 
 
    var selectedHoles = h.options[h.selectedIndex].value; 
 
    var selectedPaperWeight = p.options[p.selectedIndex].value; 
 
    return selectedStapling, selectedBinding, selectedHoles, selectedPaperWeight; 
 
} 
 

 
// Defining the price for binding 
 
function findBindingPrice(totalAmountOfSets, initialNumber) { 
 
    var bindingPrice = initialNumber; 
 
    if (getValue(selectedBinding) === "geen") { 
 
    return bindingPrice = 0; 
 
    } else { 
 
    for (var amount in priceListBinding) { 
 
     if (totalAmountOfSets > amount) { 
 
     bindingPrice = priceListBinding[amount] 
 
     } 
 
    } 
 
    } 
 
    return bindingPrice; 
 
} 
 

 
// Defining the price for making staples 
 
function findStaplePrice(totalAmountOfSets, initialNumber) { 
 
    var staplePrice = initialNumber; 
 
    if (getValue(selectedStaples) === "geen") { 
 
    return staplePrice = 0; 
 
    } else { 
 
    for (var amount in priceListStaples) { 
 
     if (totalAmountOfSets > amount) { 
 
     staplePrice = priceListStaples[amount] 
 
     } 
 
    } 
 
    } 
 
    return staplePrice; 
 
} 
 

 
//COMMENT 5 this function is almost identical with getStaples(). Let's remove it and modify getStaples is some way to always use it. Maybe we will pass element as the second parameter? 
 

 

 
// Defining the price for making holes 
 
function findHolesPrice(totalAmountOfSets, initialNumber) { 
 
    var holesPrice = initialNumber; 
 
    if (getValue(selectedHoles) === "geen") { 
 
    return holesPrice = 0; 
 
    } else { 
 
    for (var amount in priceListHoles) { 
 
     if (totalAmountOfSets > amount) { 
 
     holesPrice = priceListHoles[amount] 
 
     } 
 
    } 
 
    } 
 
    return holesPrice; 
 
} 
 

 
//COMMENT 6 this function is almost identical with getStaples(). Let's remove it and modify getStaples is some way to always use it. Maybe we will pass element as the second parameter? 
 

 

 
// Defining a paper weight price 
 
function findPaperWeightPrice(paperWeight, initialNumber) { 
 
    paperWeightPricePerPage = initialNumber; 
 
    for (var amount in priceListPaperWeight) { 
 
    if (getValue(selectedPaperWeight) >= amount) { 
 
     paperWeightPricePerPage = priceListPaperWeight[amount] 
 
    } 
 
    } 
 
    return parseFloat(paperWeightPricePerPage); 
 
} 
 

 
// Defining a function to update the price 
 
function updateView(amount) { 
 
    elems.bindingResults.innerHTML = "\u20ac " + amount.totalBindingPrice.toFixed(2); 
 
    elems.holesResults.innerHTML = "\u20ac " + amount.totalHolesPrice.toFixed(2); 
 
    elems.staplingResults.innerHTML = "\u20ac " + amount.totalStaplePrice.toFixed(2); 
 
    elems.totalAmountOfPagesResults.innerHTML = amount.totalAmountOfSets * amount.totalAmountOfPages; 
 
    elems.paperWeightResults.innerHTML = getText(textPaperWeight) + " gr."; 
 
    elems.bindingMethod.innerHTML = getText(textBinding); 
 
    elems.staplingMethod.innerHTML = getText(textStaples); 
 
    elems.holesMethod.innerHTML = getText(textHoles); 
 
    if (elems.doubleSided.checked) { 
 
    elems.pricePaperWeightResults.innerHTML = "\u20ac " + amount.totalPricePaperDoubleSided.toFixed(2); 
 
    } else { 
 
    elems.pricePaperWeightResults.innerHTML = "\u20ac " + amount.totalPricePaper.toFixed(2); 
 
    } 
 
    // Making the decision to show black and white totalprice and price per page 
 
    if (elems.blackAndWhite.checked) { 
 
    elems.colorResults.innerHTML = "Zwart-Wit" 
 
    elems.totalPricePrints.innerHTML = "\u20ac " + amount.totalPriceBlackAndWhitePrinting.toFixed(2); 
 
    elems.totalPrice.innerHTML = "\u20ac " + amount.totalBlackAndWhitePrice.toFixed(2); 
 
    elems.pricePerPageResults.innerHTML = "\u20ac " + amount.pricePerBlackAndWhitePage.toFixed(2); 
 
    } 
 
    // or to show the color totalprice and price per page 
 
    else { 
 
    elems.colorResults.innerHTML = "Kleur" 
 
    elems.totalPricePrints.innerHTML = "\u20ac " + amount.totalPriceColorPrinting.toFixed(2); 
 
    elems.totalPrice.innerHTML = "\u20ac " + amount.totalColorPrice.toFixed(2); 
 
    elems.pricePerPageResults.innerHTML = "\u20ac " + amount.pricePerColorPage.toFixed(2); 
 
    } 
 
} 
 

 
// Defining an Event Listener with an on click function 
 
elems.calculate.addEventListener("click", finalAmountOfPages); 
 

 
// Defining the Event Listeners to hide or show 'makingHoles', 'makingStaples' and 'binding' 
 
elems.stapling.addEventListener("change", toggleStapling); 
 
elems.binding.addEventListener("change", toggleBinding); 
 
elems.holes.addEventListener("change", toggleHoles);

<h1>Bereken de kosten</h1> 
 
<table> 
 
    <!-- Ask the user to enter the amount of pages --> 
 
    <tr> 
 
    <td><p>Aantal pagina's:</p></td> 
 
    <td><p><input type="number" id="amountOfPagesInput"></p></td> 
 
    <td><p id="amountOfPagesResults"></p></td> 
 
    <td></td> 
 
    </tr> 
 
    <!-- Ask the user to enter the amount of sets --> 
 
    <tr> 
 
    <td><p>Aantal sets:</p></td> 
 
    <td><p><input type="number" id="amountOfSetsInput"></p></td> 
 
    <td><p id="amountOfSetsResults"></p></td> 
 
    <td></td> 
 
    </tr> 
 
    <!-- Ask user for color of the print/standard selected is color --> 
 
    <tr> 
 
    <td><p>Kleur van afdruk: </p></td> 
 
    <td> 
 
     <p> 
 
     <input type="radio" value="kleur" name="pickYourColor" id="color" checked="true"> Kleur 
 
     <br/> 
 
     <input type="radio" value="zwart-wit" name="pickYourColor" id="blackAndWhite"> Zwart-Wit 
 
     </p> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <!-- Ask the user if he wants single or double sided prints/standard selected is single sided --> 
 
    <tr> 
 
    <td><p>Enkel of dubbelzijdig: </p></td> 
 
    <td> 
 
     <p> 
 
     <input type="radio" value="enkelzijdig" name="singleOrDoubleSided" id="singleSided" checked="true"> Enkelzijdig 
 
     <br/> 
 
     <input type="radio" value="dubbelzijdig" name="singleOrDoubleSided" id="doubleSided"> Dubbelzijdig 
 
     </p> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <!-- Ask the user which paperweight he wants --> 
 
    <tr> 
 
    <td><p>Papierdikte: </p></td> 
 
    <td> 
 
     <p> 
 
     <select id="paperWeight"> 
 
      <option value="80" id="80gr">Standaard papier</option> 
 
      <option value="120" id="120gr">120 grams + &euro; 0,05</option> 
 
      <option value="160" id="160gr">160 grams + &euro; 0,10</option> 
 
      <option value="190" id="190gr">190 grams + &euro; 0,15</option> 
 
      <option value="210" id="210gr">210 grams + &euro; 0,20</option> 
 
      <option value="250" id="250gr">250 grams + &euro; 0,25</option> 
 
      <option value="280" id="280gr">280 grams + &euro; 0,30</option> 
 
      <option value="300" id="300gr">300 grams + &euro; 0,35</option> 
 
      <option value="350" id="350gr">350 grams + &euro; 0,40</option> 
 
     </select> 
 
     </p> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <!-- Specifing the binding --> 
 
    <tr id="makingBinding"> 
 
    <td><p>Inbinden: </p></td> 
 
    <td> 
 
     <p> 
 
     <select id="binding"> 
 
      <option value="geen" id="none">-- Niet inbinden --</option> 
 
      <option value="wire-o" id="wire-o">Wire-O ringband</option> 
 
      <option value="thermo" id="thermo">Thermo lijmstrip</option> 
 
     </select> 
 
     </p> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr id="makingStaples"> 
 
    <td><p>Nieten: </p></td> 
 
    <td> 
 
     <p> 
 
     <select id="stapling"> 
 
      <option value="geen" id="none">-- Niet nieten --</option> 
 
      <option value="1" id="1left">1 nietje links</option> 
 
      <option value="2" id="1right">1 nietje rechts</option> 
 
      <option value="3" id="1left">2 nietjes links</option> 
 
      <option value="4" id="foldAndStaple">vouwen + nieten</option> 
 
     </select> 
 
     </p> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr id="makingHoles"> 
 
    <td><p>Perforeren: </p></td> 
 
    <td> 
 
     <p> 
 
     <select id="holes"> 
 
      <option value="geen" id="none">-- Niet perforeren --</option> 
 
      <option value="2 gaten" id="2holes">2 gaten</option> 
 
      <option value="4 gaten" id="4holes">4 gaten</option> 
 
     </select> 
 
     <p> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<input type="button" id="calculate" value="Berekenen"> 
 
<hr/> 
 
<!-- Start calculation --> 
 
<table id="calculation"> 
 
    <tr> 
 
    <td><h2>Uw Offerte:</h2></td> 
 
    </tr> 
 
    <!-- Show the amount of pages --> 
 
    <tr> 
 
    <td><p>Totaal aantal pagina's:</p></td> 
 
    <td><p id="totalAmountOfPagesResults"></p></td> 
 
    <!-- Show the total price --> 
 
    <td><p>Prijs per zijde:</p> </td> 
 
    <td><p id="pricePerPageResults"></p></td> 
 
    </tr> 
 
    <tr> 
 
    <td><p>Kleur of Zwart-wit:</p></td> 
 
    <td><p id="colorResults"></p></td> 
 
    <td><p>Totaal voor printen: </p></td> 
 
    <td><p id="totalPricePrints"></p></td> 
 
    </tr> 
 
    <!-- Show the price for paper weight --> 
 
    <tr> 
 
    <td><p>Papierdikte: </p></td> 
 
    <td><p id="paperWeightResults"></p></td> 
 
    <!-- Show the total price --> 
 
    <td><p>Totaal voor papier: </p></td> 
 
    <td><p id="pricePaperWeightResults"></p></td> 
 
    </tr> 
 
    <!-- Show the chosen binding method --> 
 
    <tr> 
 
    <td><p>Inbindmethode: </p></td> 
 
    <td><p id="bindingMethod"></p></td> 
 
    <!-- Show the total price --> 
 
    <td><p>Totaal voor inbinden: </p></td> 
 
    <td><p id="bindingResults"></p></td> 
 
    </tr> 
 
    <!-- Show the chosen stapling method --> 
 
    <tr> 
 
    <td><p>Nietjes: </p></td> 
 
    <td><p id="staplingMethod"></p></td> 
 
    <!-- Show the total price --> 
 
    <td><p>Totaal voor nieten: </p></td> 
 
    <td><p id="staplingResults"></p></td> 
 
    </tr> 
 
    <!-- Show the chosen binding method --> 
 
    <tr> 
 
    <td><p>Perforatie: </p></td> 
 
    <td><p id="holesMethod"></p></td> 
 
    <!-- Show the total price --> 
 
    <td><p>Totaal voor perforeren: </p></td> 
 
    <td><p id="holesResults"></p></td> 
 
    </tr> 
 
    <!-- Show startup costs --> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td><p>Opstartkosten: </p></td> 
 
    <td><p>€ 2,95</p></td> 
 
    </tr> 
 
    <!-- Show the price per page --> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td><h3>Totaalprijs: </h3></td> 
 
    <td><h3 id="totalPrice"></h3></td> 
 
    </tr> 
 
</table>

Answer 1

未捕獲的ReferenceError：selectedBinding沒有定義。

// Defining a function to hide 'makingStaples' and 'makingHoles' when binding is different from "geen" 
function toggleBinding(){ 
    if (getValue(selectedBinding) !== "geen") { 
    toggleVisibility(elems.staplesSelect, true); 
    toggleVisibility(elems.holeSelect, true); 
    } else { 
    toggleVisibility(elems.staplesSelect, false); 
    toggleVisibility(elems.holeSelect, false); 
    } 
} 

該功能使用selectedBinding，但在調用此函數之前未定義。在使用它之前聲明一個變量selectedBinding。

未捕獲的ReferenceError：selectedStaples沒有在這裏定義

// Defining a function to hide 'makingBinding' and 'makingHoles' when staples is different from "geen" 
function toggleStapling(){ 
    if (getValue(selectedStaples) !== "geen") { 
     toggleVisibility(elems.bindingSelect, true); 
    toggleVisibility(elems.holeSelect, true); 
    } else { 
     toggleVisibility(elems.bindingSelect, false); 
    toggleVisibility(elems.holeSelect, false); 
    } 
} 

同樣同樣的問題。沒有selectedStaples的聲明。

類似的問題與selectedHoles。

我在你的代碼中看到你實際上是在做一個聲明在你的註釋代碼：

/* Getting the binding value 
function getBinding(selectedBinding) { 
    var b = elems.binding; 
    var selectedBinding = b.options[b.selectedIndex].value; 
    return selectedBinding; 
} 

當你聲明函數內部變量，就會限制其範圍的作用。這意味着這在功能之外將不可用。你需要聲明這些變量，以便它們可用於toggleBinding等功能，它將解決你當前的問題。