Javascript 避免在除了元素ID之外执行相同操作的多个函数中重复代码

我有4到5个多功能，基本上是抓取在4到5个输入文本框中输入的数量。这些函数的唯一区别是输入ID

什么是最好的方式来结合这些，仍然达到预期的输出

HTML代码：

<ul class="men-sizes noul">
      <li><label><span>Mens X Small</span><input id="men_xs" type="text" name="men_xs" data-var="men_xs" class="amtbox" placeholder="quanity"  /></label></li>
      <li><label><span>Mens Small</span><input id="men_s" type="text" name="men_s" data-var="men_s" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Mens Medium</span><input id="men_m" type="text" name="men_m" data-var="men_m" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Mens Large</span><input id="men_l" type="text" name="men_l" data-var="men_l" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Mens X Large</span><input id="men_xl" type="text" name="men_xl" data-var="men_xl" class="amtbox" placeholder="quanity" /></label></li>     
</ul>

JavaScript:

<script>
//getting qty for each size

function getMenXSQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_xs"];
var howmany_men_xs =0;
if(quantity.value!=""){var howmany_men_xs = parseInt(quantity.value);}
return howmany_men_xs;
}
function getMenSQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_s"];
var howmany_men_s =0;
if(quantity.value!=""){var howmany_men_s = parseInt(quantity.value);}
return howmany_men_s;
}
function getMenMQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_m"];
var howmany_men_m =0;
if(quantity.value!=""){var howmany_men_m = parseInt(quantity.value);}
return howmany_men_m;
}
function getMenLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_l"];
var howmany_men_l =0;
if(quantity.value!=""){var howmany_men_l = parseInt(quantity.value);}
return howmany_men_l;
}
function getMenXLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_xl"];
var howmany_men_xl =0;
if(quantity.value!=""){var howmany_men_xl = parseInt(quantity.value);}
return howmany_men_x;
}

// getting prices for each at different qty levels
function getMenXSPrice()
{
var men_xs_qty =  getMenXSQty();
var location_color_price = getLocationColorPrice();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["men_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["men_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["men_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["men_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["men_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["men_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["men_xsxl_price144"].value);
if(men_xs_qty <=24){
    var men_xs_totprice = men_xs_qty * price24;
}else if(men_xs_qty > 24 && men_xs_qty <=36){
        var men_xs_totprice = men_xs_qty * price36;
}else if(men_xs_qty > 36 && men_xs_qty <=48){
        var men_xs_totprice = men_xs_qty * price48;
}else if(men_xs_qty > 48 && men_xs_qty <=60){
        var men_xs_totprice = men_xs_qty * price60;
}else if(men_xs_qty > 60 && men_xs_qty <=72){
        var men_xs_totprice = men_xs_qty * price72;
}else if(men_xs_qty > 72 && men_xs_qty <=96){
        var men_xs_totprice = men_xs_qty * price96;
}else if(men_xs_qty > 96 && men_xs_qty <=144){
        var men_xs_totprice = men_xs_qty * price144;
}else{
        var men_xs_totprice = men_xs_qty * price144;
}
return men_xs_totprice;
}

</script>

在上面，我还使用与getMenXSPrice相同的函数计算男士的小价格、男士的中价格、男士的L价格和男士的X大价格。正如您所看到的，它们非常相似，唯一的区别是元素ID

---

非常感谢。

您可以编写一个函数，接受元素名称作为输入参数，并返回元素的数量：

function getQtyforElement(elementName)
{
  var theForm = document.forms["quoteform"];
  var quantity = theForm.elements[elementName];
  var howmany =0;
  if(quantity.value!=""){var howmany = parseInt(quantity.value);}
  return howmany;
}

然后你这样称呼它：

 var men_xs_qty =  getQtyforElement("men_xs");

<script>
//getting qty for each size

function getQtyforElement(elementName)
{
  var theForm = document.forms["quoteform"];
  var quantity = theForm.elements[elementName];
  var howmany =0;
  if(quantity.value!=""){var howmany = parseInt(quantity.value);}
  return howmany;
}

// getting prices for each at different qty levels
function getMenXSPrice()
{
var men_xs_qty =  getQtyforElement("men_xs");
var location_color_price = getLocationColorPrice();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["men_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["men_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["men_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["men_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["men_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["men_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["men_xsxl_price144"].value);
if(men_xs_qty <=24){
    var men_xs_totprice = men_xs_qty * price24;
}else if(men_xs_qty > 24 && men_xs_qty <=36){
        var men_xs_totprice = men_xs_qty * price36;
}else if(men_xs_qty > 36 && men_xs_qty <=48){
        var men_xs_totprice = men_xs_qty * price48;
}else if(men_xs_qty > 48 && men_xs_qty <=60){
        var men_xs_totprice = men_xs_qty * price60;
}else if(men_xs_qty > 60 && men_xs_qty <=72){
        var men_xs_totprice = men_xs_qty * price72;
}else if(men_xs_qty > 72 && men_xs_qty <=96){
        var men_xs_totprice = men_xs_qty * price96;
}else if(men_xs_qty > 96 && men_xs_qty <=144){
        var men_xs_totprice = men_xs_qty * price144;
}else{
        var men_xs_totprice = men_xs_qty * price144;
}
return men_xs_totprice;
}

</script>

您的最终代码如下所示：

 var men_xs_qty =  getQtyforElement("men_xs");

<script>
//getting qty for each size

function getQtyforElement(elementName)
{
  var theForm = document.forms["quoteform"];
  var quantity = theForm.elements[elementName];
  var howmany =0;
  if(quantity.value!=""){var howmany = parseInt(quantity.value);}
  return howmany;
}

// getting prices for each at different qty levels
function getMenXSPrice()
{
var men_xs_qty =  getQtyforElement("men_xs");
var location_color_price = getLocationColorPrice();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["men_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["men_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["men_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["men_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["men_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["men_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["men_xsxl_price144"].value);
if(men_xs_qty <=24){
    var men_xs_totprice = men_xs_qty * price24;
}else if(men_xs_qty > 24 && men_xs_qty <=36){
        var men_xs_totprice = men_xs_qty * price36;
}else if(men_xs_qty > 36 && men_xs_qty <=48){
        var men_xs_totprice = men_xs_qty * price48;
}else if(men_xs_qty > 48 && men_xs_qty <=60){
        var men_xs_totprice = men_xs_qty * price60;
}else if(men_xs_qty > 60 && men_xs_qty <=72){
        var men_xs_totprice = men_xs_qty * price72;
}else if(men_xs_qty > 72 && men_xs_qty <=96){
        var men_xs_totprice = men_xs_qty * price96;
}else if(men_xs_qty > 96 && men_xs_qty <=144){
        var men_xs_totprice = men_xs_qty * price144;
}else{
        var men_xs_totprice = men_xs_qty * price144;
}
return men_xs_totprice;
}

</script>

---

创建一个以id为参数的函数？感谢您回答一个问题，html中的[elementName]应该是什么。您将要使用的元素名称是：men_xs、men_s、men_m、men_l和men_xl