使用下拉框和文本框计算
calculation using dropdown box and textbox
在你们指责我没有尝试代码之前,我是 Javascript 的新手,我需要将此功能实现到一项非常重要的工作中。
我从这个线程Javascript drop-down form math calculation 得到了基础下拉列表计算。我为我的代码修改了线程引用的代码
如果我的代码完全错误,请原谅我,我仍在尝试逐条进行。如果大家能帮我查明错误 and/or 问题,将不胜感激。
言归正传,我想获取每件商品的成本,然后计算出总成本。 JSFiddle link 是 here。感谢您提供的帮助。
HTML 代码
<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select name="gapparell" onchange="gentlemanl();">
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" onchange="gentlemanl();" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select name="gappareld" onchange="gentlemand();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" onchange="gentlemand();" />
<br/><br/><br/>Laundry (Ladies)
<br/>Apparels:
<select name="lapparell" onchange="ladiesl();">
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl" onchange="ladiesl();" />
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select name="lappareld" onchange="ladiesd();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total();">
<br>
JAVASCRIPT 代码
function gentlemanl() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function gentlemand() {
var Amt = document.priceCalc.gappareld;
var Qty = document.priceCalc.gqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function ladiesl() {
var Amt = document.priceCalc.lapparell;
var Qty = document.priceCalc.lqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function ladiesd() {
var Amt = document.priceCalc.lappareld;
var Qty = document.priceCalc.lqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function total() {
//I am not sure how the function works
}
这是我认为你想要做的工作的例子:http://jsfiddle.net/gd12k4mt/5/
function gentleman1() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
return parseInt(Qty.value) * parseFloat(Amt.value);
}
我设计了这样的功能。用 return 声明每个产品的价值 * 数量。
function total() {
if(isNaN(gentleman1())) {
gentleman_laundry = 0;
} else {
gentleman_laundry = gentleman1();
}
if(isNaN(gentlemand())) {
gentleman_dry = 0;
} else {
gentleman_dry = gentlemand();
}
if(isNaN(ladies1())) {
ladies_laundry = 0;
} else {
ladies_laundry = ladies1();
}
if(isNaN(ladiesd())){
ladies_dry = 0;
} else {
ladies_dry = ladiesd();
}
var totalPrice = gentleman_laundry+gentleman_dry+ladies_laundry+ladies_dry;
document.getElementById('prices').value = totalPrice;
}
总的功能类似于空字段测试。为此,我创建了变量:
var gentleman_laundry,
gentlemend_dry,
ladies_laundry,
ladies_dry;
确保您的函数名称正确:这里您在 html 事件和脚本中有两个不同的名称。
我个人没有这些 html 听众,因为我猜我们想要最后的总价。所以我在最后一个按钮上只声明了一个监听器。
document.getElementById('submit_button').addEventListener('click', function(){
total();
})
希望对您有所帮助。
你可以这样试试,
HTML
<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select id="gapparell" />
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select id="gappareld">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" />
<br/>
<br/>
<br/>Laundry (Ladies)
<br/>Apparels:
<select id="lapparell" >
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl"/>
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select id="lappareld" onchange="ladiesd();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total()">
<br>
</form>
这是JS,
function gentleman1() {
var price=0;
var e = document.getElementById('gapparell')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('gqtyl').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
//document.getElementById("prices").value = price;
}
function gentlemand() {
var price=0;
var e = document.getElementById('gappareld')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('gqtyd').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function ladies1() {
var price=0;
var e = document.getElementById('lapparell')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('lqtyl').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function ladiesd() {
var price=0;
var e = document.getElementById('lappareld')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('lqtyd').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function total() {
var price=gentleman1()+gentlemand()+ladiesd()+ladiesd();
document.getElementById('prices').value=price;
}
工作Demo
在你们指责我没有尝试代码之前,我是 Javascript 的新手,我需要将此功能实现到一项非常重要的工作中。
我从这个线程Javascript drop-down form math calculation 得到了基础下拉列表计算。我为我的代码修改了线程引用的代码
如果我的代码完全错误,请原谅我,我仍在尝试逐条进行。如果大家能帮我查明错误 and/or 问题,将不胜感激。
言归正传,我想获取每件商品的成本,然后计算出总成本。 JSFiddle link 是 here。感谢您提供的帮助。
HTML 代码
<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select name="gapparell" onchange="gentlemanl();">
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" onchange="gentlemanl();" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select name="gappareld" onchange="gentlemand();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" onchange="gentlemand();" />
<br/><br/><br/>Laundry (Ladies)
<br/>Apparels:
<select name="lapparell" onchange="ladiesl();">
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl" onchange="ladiesl();" />
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select name="lappareld" onchange="ladiesd();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total();">
<br>
JAVASCRIPT 代码
function gentlemanl() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function gentlemand() {
var Amt = document.priceCalc.gappareld;
var Qty = document.priceCalc.gqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function ladiesl() {
var Amt = document.priceCalc.lapparell;
var Qty = document.priceCalc.lqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function ladiesd() {
var Amt = document.priceCalc.lappareld;
var Qty = document.priceCalc.lqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function total() {
//I am not sure how the function works
}
这是我认为你想要做的工作的例子:http://jsfiddle.net/gd12k4mt/5/
function gentleman1() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
return parseInt(Qty.value) * parseFloat(Amt.value);
}
我设计了这样的功能。用 return 声明每个产品的价值 * 数量。
function total() {
if(isNaN(gentleman1())) {
gentleman_laundry = 0;
} else {
gentleman_laundry = gentleman1();
}
if(isNaN(gentlemand())) {
gentleman_dry = 0;
} else {
gentleman_dry = gentlemand();
}
if(isNaN(ladies1())) {
ladies_laundry = 0;
} else {
ladies_laundry = ladies1();
}
if(isNaN(ladiesd())){
ladies_dry = 0;
} else {
ladies_dry = ladiesd();
}
var totalPrice = gentleman_laundry+gentleman_dry+ladies_laundry+ladies_dry;
document.getElementById('prices').value = totalPrice;
}
总的功能类似于空字段测试。为此,我创建了变量:
var gentleman_laundry,
gentlemend_dry,
ladies_laundry,
ladies_dry;
确保您的函数名称正确:这里您在 html 事件和脚本中有两个不同的名称。
我个人没有这些 html 听众,因为我猜我们想要最后的总价。所以我在最后一个按钮上只声明了一个监听器。
document.getElementById('submit_button').addEventListener('click', function(){
total();
})
希望对您有所帮助。
你可以这样试试, HTML
<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select id="gapparell" />
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select id="gappareld">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" />
<br/>
<br/>
<br/>Laundry (Ladies)
<br/>Apparels:
<select id="lapparell" >
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl"/>
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select id="lappareld" onchange="ladiesd();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total()">
<br>
</form>
这是JS,
function gentleman1() {
var price=0;
var e = document.getElementById('gapparell')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('gqtyl').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
//document.getElementById("prices").value = price;
}
function gentlemand() {
var price=0;
var e = document.getElementById('gappareld')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('gqtyd').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function ladies1() {
var price=0;
var e = document.getElementById('lapparell')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('lqtyl').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function ladiesd() {
var price=0;
var e = document.getElementById('lappareld')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('lqtyd').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function total() {
var price=gentleman1()+gentlemand()+ladiesd()+ladiesd();
document.getElementById('prices').value=price;
}
工作Demo