[英]How can I change my array of values if some other value changes in javascript/html?
Hi I'm trying to make a webpage to calculate cake prices using this example: http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml All the code is also available here. 嗨,我正在尝试使用此示例制作一个网页来计算蛋糕价格: http : //javascript-coder.com/javascript-form/javascript-calculator-script.phtml所有代码也都在这里提供。
I want to make the filling price more expensive if their cake is bigger, how can I change this? 如果他们的蛋糕更大,我想使馅料价格更昂贵,该如何改变呢?
So if a user selects a bigger cake I want to increase the price of the filling. 因此,如果用户选择更大的蛋糕,我想增加馅料的价格。 Not just with a certain % but with a different amount of $ depending on the size and filling, I would prefer to change the "filling_prices" array depending on the size of the cake. 根据大小和填充,不仅具有一定的百分比,而且具有不同数量的$,我更希望根据蛋糕的大小更改“ filling_prices”数组。
I tried this: 我尝试了这个:
if (cake_prices[selectedCake[i].value] == 20){
var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
filling_prices["Pineapple"]=5;
filling_prices["Dobash"]=9;
filling_prices["Mint"]=5;
filling_prices["Cherry"]=5;
filling_prices["Apricot"]=8;
filling_prices["Buttercream"]=7;
filling_prices["Chocolate Mousse"]=12;
}
else{
var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=10;
filling_prices["Custard"]=10;
filling_prices["Fudge"]=14;
filling_prices["Mocha"]=16;
filling_prices["Raspberry"]=20;
filling_prices["Pineapple"]=10;
filling_prices["Dobash"]=18;
filling_prices["Mint"]=10;
filling_prices["Cherry"]=10;
filling_prices["Apricot"]=16;
filling_prices["Buttercream"]=14;
filling_prices["Chocolate Mousse"]=24;
}
This doesn't seem to work, how could I make this work? 这似乎不起作用,我怎么做呢? I'm sorry if this is kind of a stupid question but I'm just starting out. 如果这是一个愚蠢的问题,我很抱歉,但我才刚开始。
HTML code: HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Cake Form</title>
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
</head>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="cakeform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Make your cake!</legend>
<label >Size Of the Cake</label>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal()" />Round cake 6" - serves 8 people ($20)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()" />Round cake 8" - serves 12 people ($25)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()" />Round cake 10" - serves 16 people($35)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()" />Round cake 12" - serves 30 people($75)</label><br/>
<br/>
<label >Filling</label>
<select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
<option value="Pineapple">Pineapple($5)</option>
<option value="Dobash">Dobash($9)</option>
<option value="Mint">Mint($5)</option>
<option value="Cherry">Cherry($5)</option>
<option value="Apricot">Apricot($8)</option>
<option value="Buttercream">Buttercream($7)</option>
<option value="Chocolate Mousse">Chocolate Mousse($12)</option>
</select>
<br/>
<p>
<label for='includecandles' class="inlinelabel">Include Candles($5)</label>
<input type="checkbox" id="includecandles" name='includecandles' onclick="calculateTotal()" />
</p>
<p>
<label class="inlinelabel" for='includeinscription'>Include Inscription($20)</label>
<input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" />
<input type="text" id="theinscription" name="theinscription" value="Enter Inscription" />
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
<div class="cont_details">
<fieldset>
<legend>Contact Details</legend>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div><!--End of wrap-->
</body>
</html>
I changed 我变了
if (cake_prices[selectedCake[i].value] == 20){
to 至
if (getCakeSizePrice() == 20){
in the javascript code, but it doesn't seem to work 在javascript代码中,但似乎不起作用
Javascript code: JavaScript代码:
/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html
You are free to use the code in Commercial or non-commercial projects
*/
//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var cake_prices = new Array();
cake_prices["Round6"]=20;
cake_prices["Round8"]=25;
cake_prices["Round10"]=35;
cake_prices["Round12"]=75;
//Set up an associative array
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCakeSizePrice()
{
var cakeSizePrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the cake the user Chooses name=selectedCake":
var selectedCake = theForm.elements["selectedcake"];
//Here since there are 4 radio buttons selectedCake.length = 4
//We loop through each radio buttons
for(var i = 0; i < selectedCake.length; i++)
{
//if the radio button is checked
if(selectedCake[i].checked)
{
//we set cakeSizePrice to the value of the selected radio button
//i.e. if the user choose the 8" cake we set it to 25
//by using the cake_prices array
//We get the selected Items value
//For example cake_prices["Round8".value]"
cakeSizePrice = cake_prices[selectedCake[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cakeSizePrice
return cakeSizePrice;
}
// var filling_prices= new Array();
// filling_prices["None"]=0;
// filling_prices["Lemon"]=5;
// filling_prices["Custard"]=5;
// filling_prices["Fudge"]=7;
// filling_prices["Mocha"]=8;
// filling_prices["Raspberry"]=10;
// filling_prices["Pineapple"]=5;
// filling_prices["Dobash"]=9;
// filling_prices["Mint"]=5;
// filling_prices["Cherry"]=5;
// filling_prices["Apricot"]=8;
// filling_prices["Buttercream"]=7;
// filling_prices["Chocolate Mousse"]=12;
if (getCakeSizePrice() == 20){
var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
filling_prices["Pineapple"]=5;
filling_prices["Dobash"]=9;
filling_prices["Mint"]=5;
filling_prices["Cherry"]=5;
filling_prices["Apricot"]=8;
filling_prices["Buttercream"]=7;
filling_prices["Chocolate Mousse"]=12;
}
else{
var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=10;
filling_prices["Custard"]=10;
filling_prices["Fudge"]=14;
filling_prices["Mocha"]=16;
filling_prices["Raspberry"]=20;
filling_prices["Pineapple"]=10;
filling_prices["Dobash"]=18;
filling_prices["Mint"]=10;
filling_prices["Cherry"]=10;
filling_prices["Apricot"]=16;
filling_prices["Buttercream"]=14;
filling_prices["Chocolate Mousse"]=24;
}
//This function finds the filling price based on the
//drop down selection
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
//candlesPrice() finds the candles price based on a check box selection
function candlesPrice()
{
var candlePrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includecandles"
var includeCandles = theForm.elements["includecandles"];
//If they checked the box set candlePrice to 5
if(includeCandles.checked==true)
{
candlePrice=5;
}
//finally we return the candlePrice
return candlePrice;
}
function insciptionPrice()
{
//This local variable will be used to decide whether or not to charge for the inscription
//If the user checked the box this value will be 20
//otherwise it will remain at 0
var inscriptionPrice=0;
//Get a refernce to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includeinscription"
var includeInscription = theForm.elements["includeinscription"];
//If they checked the box set inscriptionPrice to 20
if(includeInscription.checked==true){
inscriptionPrice=20;
}
//finally we return the inscriptionPrice
return inscriptionPrice;
}
function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
You have to set filling_prices
when you change cake size. 更改蛋糕大小时,您必须设置filling_prices
。 What happens now is that getCakeSizePrice()
returns 0 at the start of your program. 现在发生的是, getCakeSizePrice()
在程序开始时返回0。 So the filling_prices
will be set to the cheaper prices and will never change. 因此, filling_prices
将设置为便宜的价格,并且永远不会改变。
Here is a working codepen: https://codepen.io/martitv/pen/WYYdNq?editors=0010 这是一个有效的Codepen: https ://codepen.io/martitv/pen/WYYdNq ? editors = 0010
Due to how you program is structured, this should be done in calculateTotal()
由于您的程序结构如何,应在calculateTotal()
完成此操作
Create a function like this: 创建一个这样的函数:
var filling_prices;
function setFillingPrices(cakeSizePrice) {
if (cakeSizePrice == 20){
filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
filling_prices["Pineapple"]=5;
filling_prices["Dobash"]=9;
filling_prices["Mint"]=5;
filling_prices["Cherry"]=5;
filling_prices["Apricot"]=8;
filling_prices["Buttercream"]=7;
filling_prices["Chocolate Mousse"]=12;
}
else{
filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=10;
filling_prices["Custard"]=10;
filling_prices["Fudge"]=14;
filling_prices["Mocha"]=16;
filling_prices["Raspberry"]=20;
filling_prices["Pineapple"]=10;
filling_prices["Dobash"]=18;
filling_prices["Mint"]=10;
filling_prices["Cherry"]=10;
filling_prices["Apricot"]=16;
filling_prices["Buttercream"]=14;
filling_prices["Chocolate Mousse"]=24;
}
setFillingPriceText();
}
then call it in your calculateTotal()
like this: 然后像这样在您的calculateTotal()
调用它:
function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakeSizePrice = getCakeSizePrice();
var fillingPrice = getFillingPrice(cakeSizePrice);
var candlesPrice = getCandlesPrice();
var insciptionPrice = getInsciptionPrice();
var cakePrice = cakeSizePrice + fillingPrice + candlesPrice + insciptionPrice;
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
I also created a function called setFillingPriceText()
that updates the options labels/text with the new price when selecting a new cakesize. 我还创建了一个名为setFillingPriceText()
的函数,该函数在选择新的cakesize时以新的价格更新选项标签/文本。 It looks like this: 看起来像这样:
function setFillingPriceText() {
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var fillingElements = theForm.elements["filling"].options;
var fillings = Object.keys(filling_prices);
for(var i = 1; i < fillingElements.length; i++){
fillingElements[i].text = fillings[i] + "(" + filling_prices[fillings[i]] + "$)";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.