如何在JavaScript中添加州税

时间：2018-10-10 15:34:40

标签： javascript

我正在尝试为交易分配州税，但是我真的是Java语言新手。

我正在尝试按州征收不同的税额。我也不希望它自动生成100美元的小计。

我要去哪里错了？我完全迷路了。

我尝试将不同的税额添加为新的if变量，但是当我这样做时，它消除了所有反式交易的税额。

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 === 'NY') {
      order_taxes += +(tax_rate * subtotal).toFixed(2);
      tax_percent = +(tax_rate * 100).toFixed(2);
    }
    if (state === 'NJ') {
      order_taxes += +(tax_rate * subtotal).toFixed(2);
      tax_percent = +(tax_rate * 100).toFixed(2);
    }
    if (state === 'VA') {
      order_taxes += +(tax_rate * subtotal).toFixed(2);
      tax_percent = +(tax_rate * 100).toFixed(2);
    }
    if (state === 'AL') {
      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;
}
<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="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NM">New Mexico</option>
          <option value="NJ">New Jersey</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
        <input type="hidden" id="tax_percent" name="tax_percent">
      </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>

1 个答案:

答案 0 :(得分：0)

如果要使“订单小计”可编辑。 我将跨度更改为输入，并将脚本的第5行从intterHTML更改为value。 据我所知，一切计算正确。

另一点是，“下拉菜单”会触发taxRate（）函数，因此，如果您首先设置城市，然后输入小计，则需要再次更改城市以触发计算。

我还在小计输入上设置了触发器。

并且至少我每个州分别设置tax_rate（某些虚假税率）并将计算结果放在最后。

function taxRate() {
var tax_rate = .07;
var order_taxes = 3.25;
var tax_percent = 0;
var subtotal = document.getElementById("order_subtotal").value;
subtotal = parseInt(subtotal);
var total = 0;
var state = document.getElementById("state").value;
if (state === 'AL') {
  tax_rate = .04;
}
if (state === 'AK') {
  tax_rate = .00;
} 
if (state === 'AZ') {
  tax_rate = .056;
}
if (state === 'AR') {
  tax_rate = .065;
}
if (state === 'CA') {
  tax_rate = .07;
}
if (state === 'CO') {
  tax_rate = .029;
} 
if (state === 'CT') {
  tax_rate = .063;
}
if (state === 'DE') {
  tax_rate = .00;
}
if (state === 'FL') {
  tax_rate = .06;
}
if (state === 'GA') {
  tax_rate = .04;
}
if (state === 'HI') {
  tax_rate = .00;
} 
if (state === 'ID') {
  tax_rate = .056;
}
if (state === 'IL') {
  tax_rate = .065;
}
if (state === 'IN') {
  tax_rate = .07;
}
if (state === 'IA') {
  tax_rate = .06;
} 
if (state === 'KS') {
  tax_rate = .065;
}
if (state === 'KY') {
  tax_rate = .06;
}
if (state === 'LA') {
  tax_rate = .05;
}
if (state === 'ME') {
  tax_rate = .055;
} 
if (state === 'MD') {
  tax_rate = .06;
}
if (state === 'MA') {
  tax_rate = .0625;
}
if (state === 'MI') {
  tax_rate = .06;
}
if (state === 'MN') {
  tax_rate = .068;
} 
if (state === 'MS') {
  tax_rate = .07;
}
if (state === 'MO') {
  tax_rate = .042;
}
if (state === 'MT') {
  tax_rate = .00;
}
if (state === 'NE') {
  tax_rate = .04;
}
if (state === 'NV') {
  tax_rate = .068;
} 
if (state === 'NH') {
  tax_rate = .00;
}
if (state === 'NM') {
  tax_rate = .051;
}
if (state === 'NJ') {
  tax_rate = .07;
}
if (state === 'NY') {
  tax_rate = .04;
} 
if (state === 'NC') {
  tax_rate = .047;
}
if (state === 'ND') {
  tax_rate = .05;
}
if (state === 'OH') {
  tax_rate = .057;
}
if (state === 'OK') {
  tax_rate = .045;
}
if (state === 'OR') {
  tax_rate = .0;
}
if (state === 'PA') {
  tax_rate = .06;
}
if (state === 'RI') {
  tax_rate = .07;
}
if (state === 'SC') {
  tax_rate = .06;
}
if (state === 'SD') {
  tax_rate = .045;
}
if (state === 'TN') {
  tax_rate = .07;
}
if (state === 'TX') {
  tax_rate = .062;
}
if (state === 'UT') {
  tax_rate = .059;
}
if (state === 'VT') {
  tax_rate = .06;
}
if (state === 'VA') {
  tax_rate = .053;
}
if (state === 'WA') {
  tax_rate = .065;
}
if (state === 'WV') {
  tax_rate = .06;
}
if (state === 'WI') {
  tax_rate = .05;
}
if (state === 'WY') {
  tax_rate = .04;
}
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;
}
<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="AZ">Arizona</option>
                                      <option value="AR">Arkansas</option>
                                      <option value="CA">California</option>  
                                      <option value="CO">Colorado</option>  
                                      <option value="CT">Connecticut</option>  
                                      <option value="DE">Delaware</option>  
                                      <option value="FL">Florida</option>  
                                      <option value="GA">Georgia</option>  
                                      <option value="HI">Hawaii</option>  
                                      <option value="ID">Idaho</option>  
                                      <option value="IL">Illinois</option>  
                                      <option value="IN">Indiana</option>  
                                      <option value="IA">Iowa</option>  
                                      <option value="KS">Kansas</option>  
                                      <option value="KY">Kentucky</option>  
                                      <option value="LA">Louisiana</option>  
                                      <option value="ME">Maine</option> 
                                      <option value="MD">Maryland</option> 
                                      <option value="MA">Massachusetts</option> 
                                      <option value="MI">Michigan</option> 
                                      <option value="MN">Minnesota</option> 
                                      <option value="MS">Mississippi</option> 
                                      <option value="MO">Missouri</option> 
                                      <option value="MT">Montana</option> 
                                      <option value="NE">Nebraska</option> 
                                      <option value="NV">Nevada</option> 
                                      <option value="NH">New Hampshire</option> 
                                      <option value="NM">New Mexico</option>
                                      <option value="NJ">New Jersey</option>
                                      <option value="NY">New York</option>
                                      <option value="NC">North Carolina</option>
                                      <option value="ND">North Dakota</option>
                                      <option value="OH">Ohio</option>
                                      <option value="OK">Oklahoma</option>
                                      <option value="OR">Oregon</option>
                                      <option value="PA">Pennsylvania</option>
                                      <option value="RI">Rhode Island</option>
                                      <option value="SC">South Carolina</option>
                                      <option value="SD">South Dakota</option>
                                      <option value="TN">Tennessee</option>
                                      <option value="TX">Texas</option>
                                      <option value="UT">Utah</option>
                                      <option value="VT">Vermont</option>
                                      <option value="VA">Virginia</option>
                                      <option value="WA">Washington</option>
                                      <option value="WV">West Virginia</option>
                                      <option value="WI">Wisconsin</option>
                                      <option value="WY">Wyoming</option>  
                                    </select>
                                    <input type="hidden" id="tax_percent" name="tax_percent">
                              </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>$<input type="number" id="order_subtotal" placeholder="Subtotal" onChange="taxRate()" /></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>

相关问题
最新问题