javascript 计算错误

Question

我的这个js有一个错误。我在下拉列表中选择一个税级，并且更新了税费的值我更改了税费，税费值也随之更新如果我输入成本值，则 margin 的计算也不起作用。如何解决这些要素

https://jsfiddle.net/oitsuki/pLofhns3/

谢谢

通过控制台我遇到这些错误

updateGross is not defined
updateMargin is not defined


  $tax_class_drop_down =  Tax::TaxClassDropDown();
?>
            <script type="text/javascript"><!--
              var tax_rates = new Array();
<?php
              for ($i=0, $n=sizeof($tax_class_drop_down); $i<$n; $i++) {
                if ($tax_class_drop_down[$i]['id'] > 0) {
                  echo 'tax_rates["' . $tax_class_drop_down[$i]['id'] . '"] = ' . Tax::displayTaxRateValue($tax_class_drop_down[$i]['id']) . ';' . "\n";
                }
              }
?>

              function doRound(x, places) {
                return Math.round(x * Math.pow(10, places)) / Math.pow(10, places);
              }

              function getTaxRate() {
                var selected_value = document.forms["new_product"].products_tax_class_id.selectedIndex;
                var parameterVal = document.forms["new_product"].products_tax_class_id[selected_value].value;

                if ( (parameterVal > 0) && (tax_rates[parameterVal] > 0) ) {
                  return tax_rates[parameterVal];
                } else {
                  return 0;
                }
              }

              function updateGross() {
                var taxRate = getTaxRate();
                var grossValue = document.forms["new_product"].products_price.value;
                if (taxRate > 0) {
                  grossValue = grossValue * ((taxRate / 100) + 1);
                }

<?php
            // Desactivation du module B2B
            if (MODE_B2B_B2C == 'true') {
              $QcustomersGroup = $OSCOM_Db->prepare('select distinct customers_group_id,
                                                                     customers_group_name,
                                                                     customers_group_discount
                                                     from :table_customers_groups
                                                     where customers_group_id != 0
                                                     order by customers_group_id
                                                    ');

              $QcustomersGroup->execute();

              while ($QcustomersGroup->fetch() ) {
?>
                var grossValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?> = document.forms["new_product"].price<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?>.value;

                if (taxRate > 0) {
                  grossValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?> = grossValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?> * ((taxRate / 100) + 1);
                }

                document.forms["new_product"].price_gross<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?>.value = doRound(grossValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?>, 4);
<?php
              }
            }
?>
                document.forms["new_product"].products_price_gross.value = doRound(grossValue, 4);
         }

/********************************/
/*        Margin report   */
/********************************/
              function updateMargin() {
                var grossValue = document.forms["new_product"].products_price.value; // valeur net du prix
                var costValue = document.forms["new_product"].products_cost.value; // cout d'achat
                var handlingValue = document.forms["new_product"].products_handling.value; // manutention ou autres frais

                if (isNaN(costValue)) costValue=0;
                if (isNaN(handlingValue)) handlingValue=0;

                marginValue =  100 - ((( parseInt(costValue) + parseInt(handlingValue)) /  parseInt(grossValue)) * 100);
                marginValue = Math.round(marginValue,2);
                document.getElementById('products_price_margins').innerHTML = marginValue + "%";
              }

              function updateNet() {
                var taxRate = getTaxRate();
                var netValue = document.forms["new_product"].products_price_gross.value;

                if (taxRate > 0) {
                  netValue = netValue / ((taxRate / 100) + 1);
                }

<?php
// Desactivation du module B2B
        if (MODE_B2B_B2C == 'true') {
          $QcustomersGroup = $OSCOM_Db->prepare('select distinct customers_group_id,
                                                                customers_group_name,
                                                                customers_group_discount
                                                 from :table_customers_groups
                                                 where customers_group_id != 0
                                                 order by customers_group_id
                                                ');

          $QcustomersGroup->execute();

          while ($QcustomersGroup->fetch() ) {
?>
                var netValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?> = document.forms["new_product"].price_gross<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?>.value;

                if (taxRate > 0) {
                  netValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?> = netValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?> / ((taxRate / 100) + 1);
                }

                document.forms["new_product"].price<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?>.value = doRound(netValue<?php echo $QcustomersGroup->valueInt('customers_group_id'); ?>, 4);
<?php
          }
        }
?>

              document.forms["new_product"].products_price.value = doRound(netValue, 4);
            }
//--></script>

            <div class="tab-pane" id="tab3">
              <div class="col-md-12 mainTitle">
                <span><?php echo OSCOM::getDef('text_products_price_public'); ?></span>
              </div>
              <div class="adminformTitle" style="height:100%; padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px;">
                <div style="background-color:#ebebff; height:100%;">
                  <div>&nbsp;</div>
                  <div>
                    <span class="col-md-2"><?php echo OSCOM::getDef('text_products_tax_class'); ?></span>
                    <span class="col-md-2"><?php echo HTML::selectMenu('products_tax_class_id', $tax_class_drop_down, $pInfo->products_tax_class_id, 'onchange="updateGross()"'); ?></span>
                  </div>
                  <div>&nbsp;</div>
                  <div class="row">
                    <div class="col-md-12">
                      <span class="col-md-2"><?php echo OSCOM::getDef('text_products_price'); ?></span>
<?php
      if (DISPLAY_DOUBLE_TAXE == 'false') {
        echo '<span class="col-md-2">'. HTML::inputField('products_price', $pInfo->products_price, 'onkeyup="updateGross()"') . '<strong>' . OSCOM::getDef('text_products_price_net') . '</strong></span>';
        echo '<span class="col-md-2">'.  HTML::inputField('products_price_gross', $pInfo->products_price, 'onkeyup="updateNet()"') . '<strong>' . OSCOM::getDef('text_products_price_gross') . '</strong></span>';
      } else {
        echo '<span class="col-md-2">' . HTML::inputField('products_price', $pInfo->products_price, 'onkeyup="updateGross()"') . '<strong>' . OSCOM::getDef('text_products_price_net') . '</strong></span>';
      }
?>

我的 HTML 代码

            <script type="text/javascript"><!--
              var tax_rates = new Array();
tax_rates["3"] = 3.00%;
tax_rates["4"] = 4.00%;
tax_rates["1"] = 1.00%;
tax_rates["2"] = 2.00%;

              function doRound(x, places) {
                return Math.round(x * Math.pow(10, places)) / Math.pow(10, places);
              }

              function getTaxRate() {
                var selected_value = document.forms["new_product"].products_tax_class_id.selectedIndex;
                var parameterVal = document.forms["new_product"].products_tax_class_id[selected_value].value;

                if ( (parameterVal > 0) && (tax_rates[parameterVal] > 0) ) {
                  return tax_rates[parameterVal];
                } else {
                  return 0;
                }
              }

              function updateGross() {
                var taxRate = getTaxRate();
                var grossValue = document.forms["new_product"].products_price.value;
                if (taxRate > 0) {
                  grossValue = grossValue * ((taxRate / 100) + 1);
                }

                var grossValue1 = document.forms["new_product"].price1.value;

                if (taxRate > 0) {
                  grossValue1 = grossValue1 * ((taxRate / 100) + 1);
                }

                document.forms["new_product"].price_gross1.value = doRound(grossValue1, 4);
                document.forms["new_product"].products_price_gross.value = doRound(grossValue, 4);
         }

/********************************/
/*        Margin report   */
/********************************/
              function updateMargin() {
                var grossValue = document.forms["new_product"].products_price.value; // valeur net du prix
                var costValue = document.forms["new_product"].products_cost.value; // cout d'achat
                var handlingValue = document.forms["new_product"].products_handling.value; // manutention ou autres frais

                if (isNaN(costValue)) costValue=0;
                if (isNaN(handlingValue)) handlingValue=0;

                marginValue =  100 - ((( parseInt(costValue) + parseInt(handlingValue)) /  parseInt(grossValue)) * 100);
                marginValue = Math.round(marginValue,2);
                document.getElementById('products_price_margins').innerHTML = marginValue + "%";
              }

              function updateNet() {
                var taxRate = getTaxRate();
                var netValue = document.forms["new_product"].products_price_gross.value;

                if (taxRate > 0) {
                  netValue = netValue / ((taxRate / 100) + 1);
                }

                var netValue1 = document.forms["new_product"].price_gross1.value;

                if (taxRate > 0) {
                  netValue1 = netValue1 / ((taxRate / 100) + 1);
                }

                document.forms["new_product"].price1.value = doRound(netValue1, 4);

              document.forms["new_product"].products_price.value = doRound(netValue, 4);
            }
//--></script>

            <div class="tab-pane" id="tab3">
              <div class="col-md-12 mainTitle">
                <span>Public price & TAXE</span>
              </div>
              <div class="adminformTitle" style="height:100%; padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px;">
                <div style="background-color:#ebebff; height:100%;">
                  <div>&nbsp;</div>
                  <div>
                    <span class="col-md-2">Tax Class</span>
                    <span class="col-md-2"><select name="products_tax_class_id" id="products_tax_class_id" onchange="updateGross()" class="form-control"><option value="0">--none--</option><option value="3">Biens taxables Canada</option><option value="4">Taxe hamonisée Québec</option><option value="1" selected="selected">TVA 20</option><option value="2">TVA 5.5</option></select></span>
                  </div>
                  <div>&nbsp;</div>
                  <div class="row">
                    <div class="col-md-12">
                      <span class="col-md-2">Price:</span>
<span class="col-md-2"><input type="text" name="products_price" value="20.0000" onkeyup="updateGross()" class="form-control" /><strong>TAX exc.</strong></span><span class="col-md-2"><input type="text" name="products_price_gross" value="20.0000" onkeyup="updateNet()" class="form-control" /><strong>TAX inc.</strong></span>                    </div>
                  </div>
                  <div class="spaceRow"></div>
                  <div class="row">
                    <div class="col-md-12">
                      <span class="col-md-2 centerInputFields">Product supplier price</span>
                      <span class="col-md-3"><input type="text" name="products_cost" value="0.00" onkeyUp="updateMargin()" class="form-control" /><strong>TAX exc.</strong></span>
                    </div>
                  </div>
                  <div class="spaceRow"></div>
                  <div class="row">
                    <div class="col-md-12">
                      <span class="col-md-2 centerInputFields">Other costs associated</span>
                      <span class="col-md-3"><input type="text" name="products_handling" value="0.00" onkeyUp="updateMargin()" class="form-control" /><strong>TAX exc.</strong></span>
                    </div>
                  </div>
                  <div class="spaceRow"></div>
                  <div class="row">
                    <div class="col-md-12">
                      <span class="col-md-2 centerInputFields">Profit Margin</span>
                      <div><span id='products_price_margins'></span></div>
                    </div>
                  </div>
                  <div class="spaceRow"></div>                 
                </div>
              </div>

Answer 1

修复 1:

tax_rates["3"] = 3.00%;     // ---> incorrect
tax_rates["3"] = 3.00;      // ---> correct 

修复 2:
HTML 不包含任何名为 new_product 的表单。因此，现在有两个选择 - 定义表单或直接使用元素的 id 访问元素。如果您确实选择定义一个表单来包含 HTML 元素，那么访问方法将与您到目前为止所遵循的方法相同:

document.forms["new_product"].products_handling.value;

修复3:
如果您为 HTML 元素定义 name，则可以使用 document.getElementByName 访问它。同样，如果您定义 id，则可以使用 document.getElementById 访问它。最好同时定义 name 和 id ，这样您(甚至脚本)就不会感到困惑。这就是出现那些未定义错误的原因。

因此，更新了 JS:

    var tax_rates = new Array();
    tax_rates["3"] = 3.00;
    tax_rates["4"] = 4.00;
    tax_rates["1"] = 1.00;
    tax_rates["2"] = 2.00;

    function doRound(x, places) {
        return Math.round(x * Math.pow(10, places)) / Math.pow(10, places);
    }

    function getTaxRate() {
        //var selected_value = document.forms["new_product"].products_tax_class_id.selectedIndex;
        parameterVal = document.getElementById("products_tax_class_id").value;
        if ( (parameterVal > 0) && (tax_rates[parameterVal] > 0) ) {
            return tax_rates[parameterVal];
        }
        else {
            return 0;
        }
    }

    function updateGross() {
        var taxRate = getTaxRate();
        var grossValue = document.getElementById("products_price").value;
        if (taxRate > 0) {
            grossValue = grossValue * ((taxRate / 100) + 1);
        }
        document.getElementById("products_price_gross").value = doRound(grossValue, 4);
    }

/********************************/
/*        Margin report         */
/********************************/
    function updateMargin() {
        var grossValue = document.getElementById("products_price").value; // valeur net du prix
        var costValue = document.getElementById("products_cost").value; // cout d'achat
        var handlingValue = document.getElementById("products_handling").value; // manutention ou autres frais

        if (isNaN(costValue)) costValue=0;
        if (isNaN(handlingValue)) handlingValue=0;

        marginValue =  100 - ((( parseInt(costValue) + parseInt(handlingValue)) /  parseInt(grossValue)) * 100);
        marginValue = Math.round(marginValue,2);
        document.getElementById("products_price_margins").innerHTML = marginValue + "%";
    }

    function updateNet() {
        var taxRate = getTaxRate();
        var netValue = document.getElementById("products_price_gross").value;

        if (taxRate > 0) {
            netValue = netValue / ((taxRate / 100) + 1);
        }

        document.getElementById("products_price").value = doRound(netValue, 4);
    }

请注意，我在上面的脚本中没有考虑名为 price1、price_gross1 等的元素，因为它们没有相应的 HTML 元素。

工作示例:
http://codepen.io/anon/pen/pRwMyG