[英]How can I change my array of values if some other value changes in javascript/html?
嗨，我正在尝试使用此示例制作一个网页来计算蛋糕价格： http : //javascript-coder.com/javascript-form/javascript-calculator-script.phtml所有代码也都在这里提供。
如果他们的蛋糕更大，我想使馅料价格更昂贵，该如何改变呢？
因此，如果用户选择更大的蛋糕，我想增加馅料的价格。 根据大小和填充，不仅具有一定的百分比，而且具有不同数量的$，我更希望根据蛋糕的大小更改“ filling_prices”数组。
我尝试了这个：
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;
}
这似乎不起作用，我怎么做呢？ 如果这是一个愚蠢的问题，我很抱歉，但我才刚开始。
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>
我变了
if (cake_prices[selectedCake[i].value] == 20){
至
if (getCakeSizePrice() == 20){
在javascript代码中，但似乎不起作用
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';
}
更改蛋糕大小时，您必须设置filling_prices 。 现在发生的是， getCakeSizePrice()在程序开始时返回0。 因此， filling_prices将设置为便宜的价格，并且永远不会改变。
这是一个有效的Codepen： https ：//codepen.io/martitv/pen/WYYdNq ？ editors = 0010
由于您的程序结构如何，应在calculateTotal()完成此操作
创建一个这样的函数：
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();
}
然后像这样在您的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;
}
我还创建了一个名为setFillingPriceText()的函数，该函数在选择新的cakesize时以新的价格更新选项标签/文本。 看起来像这样：
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]] + "$)";
}
}
如何使用 Javascript 循环遍历数组并更改和添加额外的 HTML，以输出带有这些值的一些文本？
[英]How Can I use Javascript to loop through an array and change and add extra HTML that outputs some text with those values?
如何在不声明其他变量更改的情况下更改javascript数组中的变量？
[英]How can I change a variable in a javascript array without the other variables changes being declared?
如果我的javascript数组的值包含两个元素，如何使用一个元素而不使用另一个元素？
[英]If my javascript array has values that have two elements how can I use one element without the other?
如果在一个文件中更改 DIV 元素，我该怎么做，它会在所有其他 html 文件中自动更改
[英]How can i do that if a change DIV element in one file it changes automatically in all other html file
如何一起使用HTML和Javascript来更改变量值？
[英]How can I use HTML and Javascript together to change the variable value?
当我的进度条值发生变化时，如何更改css渐变值？
[英]How do I change the css gradient values when my progress bar value changes?
我如何在 JavaScript 中创建双向映射，或以其他方式交换值？
[英]How can I create a two-way mapping in JavaScript, or some other way to swap out values?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.