Question

在你们没有尝试代码之前让我失望之前，我对Javascript很陌生，我需要将这个功能实现为一项非常重要的工作。

我从这个帖子Javascript drop-down form math calculation得到了基础下拉计算。我修改了线程引用的代码，用于我的代码

请原谅我，如果我的代码是完全错误的，我仍然想要一块一块地做。如果你们都能帮助我查明错误和/或问题，将不胜感激。

回到主题，我想获得每个项目的成本，然后计算要计算的总成本。 JSFiddle链接是here。感谢您提供的帮助。

HTML CODES

<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 CODES

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
}

Answer 1

这是我认为你想做的工作例子：http://jsfiddle.net/gd12k4mt/5/

function gentleman1() {
    var Amt = document.priceCalc.gapparell;
    var Qty = document.priceCalc.gqtyl;
    return parseInt(Qty.value) * parseFloat(Amt.value);
}

我设计了类似的功能。使用每个产品价值的退货声明*数量。

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();
})

希望这会有所帮助。

Answer 2

你可以这样试试， 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

使用下拉框和文本框计算

2 个答案: