用JavaScript计算美国各州的营业税

Question

因此，我试图计算项目的营业税，但我无法使其正常工作。 不用说，我还在学习javascript。 运作方式如下：如果买家选择新泽西州，我想对订单加收7％的营业税。 其他任何地方都为零。

这是jsFiddle项目的链接： https ://jsfiddle.net/JohnOHFS/hpdnmjfL/

这是我的基本表单HTML（跳过开始和结束标签等）

<div id="public">
                      <div class="row">
                          <div class="col-xs-7 col-md-7">
                              <div class="form-group">
                                  <label for="city">CITY</label>
                                  <input type="text" size="20" autocomplete="off" class="city input-small form-control" placeholder="CITY"/>
                              </div>
                          </div>
                          <div class="col-xs-4 col-md-4">
                              <div class="form-group">
                                  <label for="state">STATE</label>
                                  <select class="form-control" id="state" onChange="taxRate()">
                                      <option value="">N/A</option>
                                      <option value="AK">Alaska</option>
                                      <option value="AL">Alabama</option>
                                      <option value="NH">New Hampshire</option>
                                      <option value="NJ">New Jersey</option>
                                      <option value="NM">New Mexico</option>  
                                    </select>
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-xs-5 col-md-5">
                              <div class="form-group">
                                  <label for="zipCode">ZIP CODE</label>
                                  <input id="zip" type="text" size="6" autocomplete="off" class="zipcode form-control" placeholder="ZIP CODE"/>
                              </div>
                          </div>
                      </div>
                  </div> <!-- Closes Public -->
                    <div class="row">
                        <div class="col-xs-7 col-md-7">
                                <label>ORDER INFORMATION</label>                                                        
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-7 col-md-7 col-md-offset-1">
                                <label>SUBTOTAL: <b>$<span id="order_subtotal">100</span></b></label>                                                           
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-7 col-md-7 col-md-offset-1">
                                <label>TAXES: <b><span id="order_tax" type="text" value=""></span></b></label>                                                                  
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-7 col-md-7 col-md-offset-1">
                                <label>ORDER TOTAL: <b><span id="order_total" type="text" value=""></span></b></label>                                                                  
                        </div>
                    </div>

这是Javascript：

function taxRate() {
    var tax_rate = .07;
    var order_taxes = 0;
    var subtotal = document.getElementById("order_subtotal").value;
    subtotal = parseInt(subtotal);
    var total = 0;
    var state = document.getElementById("state").value;
    var selection = state.options[state.selectedIndex].value;
    if (selection == 'New Jersey') {
      order_taxes += tax_rate * subtotal;
    } 
    if (selection == 'else') {
    order_taxes = 0;
    }
    if (selection == 'New Jersey') {
    tax_percent = tax_rate * 100;
    } 
    if (selection == 'else') {
    tax_percent = 0;
    }

    var el = document.getElementById('order_tax');
    el.textContent = order_taxes;

    var total = subtotal + order_taxes;
    var el1 = document.getElementById('order_total');
    el1.textContent = total;

}

这是我的问题。
1.我做错了什么？ 2.如何从此javascript将tax_percent传递到html中以提交给Stripe？

谢谢！

Answer 1

小提琴的第一个问题是taxRate()函数不是全局函数，因此无法从内联html属性事件处理程序中调用它。 这是因为默认情况下，JSFiddle将JS包装在一个onload处理程序中。 使用JS设置菜单（位于JS窗口的右上角），将“加载类型”更改为“不包装”选项之一。

然后，获取订单总价值会遇到问题，因为您尝试在元素为跨度时获取元素.value ，因此需要使用.innerHTML 。

接下来的事情是，将state变量设置为等于select元素当前选择的值 。 因此它将是'NJ'或'AK'等（或如果没有选择则为空字符串。）因此，当您尝试将selection变量设置为state.options[state.selectedIndex].value ，不会工作，因为state是一个字符串。 针对'NJ'测试您现有的state变量：

if (state == 'NJ')

您还将测试if (selection == 'else')不会执行任何操作，因为即使您的selection变量起作用，它的值也永远不会是字符串 'else' 。 我认为您只想在其中声明else语句，除了该块实际执行的操作只是将order_taxes = 0设置，并将order_taxes在声明时设置为默认值0 。 因此，您根本不需要这部分。

然后， if要在新泽西州进行测试，则可以将其与第一个结合使用。 它设置了一个未声明的tax_percent变量，因此在函数顶部添加一个带有var的声明。

另外，由于JS进行浮点数学运算的方式，结果100 * 0.07为7.000000000000001 。 您可能希望将其四舍五入到美分金额的小数点后两位（在这种情况下将是美分，但是很显然，如果订单总额不是这样的整数，您可能会在税中获得几美分）。

如何将tax_percent从此javascript传递到html中以提交给Stripe？

一种方法是向表单添加隐藏的输入，并从JS设置其值：

<input type="hidden" id="tax_percent" name="tax_percent">

document.getElementById('tax_percent').value = tax_percent;

放在一起：

function taxRate() {
    var tax_rate = .07;
    var order_taxes = 0;
    var tax_percent = 0;
    var subtotal = document.getElementById("order_subtotal").innerHTML;
    subtotal = parseInt(subtotal);
    var total = 0;
    var state = document.getElementById("state").value;
    if (state === 'NJ') {
      order_taxes += +(tax_rate * subtotal).toFixed(2);
      tax_percent = +(tax_rate * 100).toFixed(2);
    }

    var el = document.getElementById('order_tax');
    el.textContent = order_taxes;

    var total = subtotal + order_taxes;
    var el1 = document.getElementById('order_total');
    el1.textContent = total;
    document.getElementById('tax_percent').value = tax_percent;
}

演示： https ： //jsfiddle.net/hpdnmjfL/5/