问题
So I'm trying to calculate sales tax for a project and I can't get it to work. Needless to say, I'm still learning javascript. Here's how it works: If the buyer selects New Jersey, I want to apply a 7% sales tax to the order. Everywhere else goes to zero.
Here's a link to the jsFiddle project: https://jsfiddle.net/JohnOHFS/hpdnmjfL/
Here's my basic form HTML (skipping the opening and closing tags, etc.)
<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>
Here's the 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;
}
Here are my questions.
1. What am i doing wrong?
2. How do I pass tax_percent from this javascript into the html for submittal to Stripe?
Thanks!
回答1:
The first problem with your fiddle is that the taxRate() function is not a global function and so it can't be called from an inline html attribute event handler. This is because by default JSFiddle wraps the JS in an onload handler. Use the JS settings menu (from top-right corner of the JS window) to change the "load type" to one of the "no wrap" options.
Then you've got a problem getting the order total value, because you try to get the element .value when it is a span, so you need to use .innerHTML.
The next thing is that your state variable is set equal to the value of the current selection of the select element. So it will be 'NJ', or 'AK', etc. (Or an empty string if nothing is selected.) So when you try to set the selection variable to state.options[state.selectedIndex].value that won't work because state is a string. Test your existing state variable against 'NJ':
if (state == 'NJ')
You also have a test if (selection == 'else') which won't do anything because even if your selection variable worked its value would never be the string 'else'. I think you just want an else statement there, except that what that block actually does is just set order_taxes = 0 and order_taxes has already been set to a default of 0 at the point of declaration. So you don't need that part at all.
Then you've got another if testing for New Jersey that could be combined with the first one. It's setting a tax_percent variable that isn't declared, so add a declaration for that with var at the top of your function.
Also, because of the way JS does floating point maths, 100 * 0.07 comes out to be 7.000000000000001. You probably want to round that off to two decimal places for the cents amount (which in this case would be no cents, but obviously if the order total wasn't such a round number you might get some number of cents in the taxes).
How do I pass tax_percent from this javascript into the html for submittal to Stripe?
One way is to add a hidden input to your form and set its value from JS:
<input type="hidden" id="tax_percent" name="tax_percent">
document.getElementById('tax_percent').value = tax_percent;
Putting that all together:
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;
}
Demo: https://jsfiddle.net/hpdnmjfL/5/
来源：https://stackoverflow.com/questions/38214372/calculating-sales-tax-for-a-us-state-in-javascript