0
JavaScript를 사용하여 양식을 작성하려고합니다. & JavaScript. 많은 함수를 정의했지만 그 중 하나는 함수가 정의되지 않았다는 일부 오류를 제공합니다. 내가 정의한 것이기는하지만 확실히 어딘가에 놓쳤거나 잘못 정의했을 수 있습니까? 문제가 어디에 있는지 확실히 알지 못합니다! 내가지고있어함수는 정의되지 않았지만, 나는 그것을 정의했다. 나는 무엇을 놓치고 있는가?
오류는 다음과 같습니다
이 이 이이 catch되지 않은 ReferenceError가 : selectedBinding는을 정의되지 않은
이 이 이이 catch되지 않은 ReferenceError가 : selectedStaples이
catch되지 않은 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 + € 0,05</option>
<option value="160" id="160gr">160 grams + € 0,10</option>
<option value="190" id="190gr">190 grams + € 0,15</option>
<option value="210" id="210gr">210 grams + € 0,20</option>
<option value="250" id="250gr">250 grams + € 0,25</option>
<option value="280" id="280gr">280 grams + € 0,30</option>
<option value="300" id="300gr">300 grams + € 0,35</option>
<option value="350" id="350gr">350 grams + € 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>
여기서 변수의 선택은 스테이플입니까? – Jigar7521
그 getValue 함수는 무엇을하고 있습니까? 그것은 4 개의 인자를 받아들입니다. 그러나 여러분은 항상 오직 하나만 채우고 다시 출력하고 4 그리고 그것들을 문자열과 비교합니까? – Prototype
다음은 함수 정의입니다. '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].값; 돌아 가기 selectedStapling, selectedBinding, selectedHoles, selectedPaperWeight; } ' –