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.如何将tax_percent从此javascript传递到html以提交给Stripe？

谢谢！

Answer 1

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

然后您在获取订单总值时遇到问题，因为当它是一个范围时，您尝试获取元素.value，因此您需要使用.innerHTML。

接下来，您的state变量设置为等于当前select元素选择的值。因此它将是'NJ'或'AK'等。（如果未选择任何内容，则为空字符串。）因此，当您尝试将selection变量设置为state.options[state.selectedIndex].value时将无效，因为state是一个字符串。针对state测试现有的'NJ'变量：

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/

用Javascript计算美国州的销售税

1 个答案: