计算 Javascript 中美国各州的销售税

Question

所以我正在尝试计算项目的销售税，但我无法让它工作。不用说，我还在学习javascript。运作方式如下：如果买家选择新泽西州，我想对订单征收 7% 的销售税。其他地方都归零。

这是 jsFiddle 项目的 link：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. 如何将 tax_percent 从 javascript 传递到 html 以提交给 Stripe？

谢谢！

Answer 1

您的 fiddle 的第一个问题是 taxRate() 函数不是全局函数，因此不能从内联 html 属性事件处理程序中调用它。这是因为默认情况下 JSFiddle 将 JS 包装在 onload 处理程序中。使用 JS 设置菜单（从 JS window 的右上角）将 "load type" 更改为 "no wrap" 选项之一。

那么你在获取订单总值时遇到了问题，因为你试图获取元素.value时它是一个span，所以你需要使用.innerHTML.

接下来是将您的 state 变量设置为等于 select 元素的当前 selection 的 value .所以它将是 'NJ'，或 'AK'，等等（如果没有 selected，则为空字符串。）所以当您尝试将 selection 变量设置为 state.options[state.selectedIndex].value 这将不起作用，因为 state 是一个字符串。根据 'NJ':

测试现有的 state 变量

if (state == 'NJ')

您还有一个测试 if (selection == 'else')，它不会执行任何操作，因为即使您的 selection 变量起作用，它的值也永远不会是 string 'else'。我想你只需要一个 else 语句，除了那个块实际做的只是设置 order_taxes = 0 并且 order_taxes 已经设置为默认值 0 在声明点。所以你根本不需要那部分。

然后你有另一个 if 可以与第一个结合的新泽西测试。它设置了一个未声明的 tax_percent 变量，因此在函数顶部添加一个带有 var 的声明。

此外，由于 JS 进行浮点数学运算的方式，100 * 0.07 变成了 7.000000000000001。您可能希望将美分金额四舍五入到小数点后两位（在这种情况下，没有美分，但很明显，如果订单总额不是这样的整数，您可能会在税款中得到一些美分）。

How do I pass tax_percent from this javascript into the html for submittal to 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/

计算 Javascript 中美国各州的销售税

Calculating Sales Tax for a US State in Javascript

html

javascript

jquery

ruby-on-rails

stripe-payments