dimanche 21 juin 2020

Increment (+=) in Js keeps adding to variable unless I refresh the page

I created a function that changes delivery price due to location. Whenever I go back to change the location instead of just adding to the book price to the delivery price, it adds on the previous sum total. I need a code that allows it to go back to its original price after clicking the back button and changing the location.

var book_fee = 3500;


function delivery_fee() {
  if (document.getElementById('swest').checked) {
    book_fee += 1600;
  } else if (document.getElementById('lagos').checked) {
    book_fee += 700;
  } else if (document.getElementById('east').checked) {
    book_fee += 2500;
  } else if (document.getElementById('north').checked) {
    book_fee += 2500;
  } else {
    book_fee += 2500;
  }
}
<div id="page1" style="display:block;">

  <div class="form-group">
    <label for="customer_name" class="col-form-label">Name:</label>
    <input type="text" class="form-control" id="customer_name_1">
  </div>
  <div class="form-group">
    <label for="customer_phone_no" class="col-form-label">Phone No.:</label>
    <input type="text" class="form-control" id="customer_phone_no_1">
  </div>
  <div class="form-group">
    <label for="customer-email" class="col-form-label">Email:</label>
    <input type="email" class="form-control" id="customer_email_1">
  </div>
  <div class="form-group">
    <label for="customer-address" class="col-form-label">Book Delivered To (Your Address): </label>
    <input type="address" class="form-control" id="customer_address_1">
  </div>
  <div class="form-group">
    <label for="South West">Pick your geographical area</label><br>
    <input type="radio" id="swest" name="area" onclick="delivery_fee()">
    <label for="South West">South West</label><br>
    <input type="radio" id="mbelt" name="area" onclick="delivery_fee()">
    <label for="Middle Belt">Middle Belt</label><br>
    <input type="radio" id="east" name="area" onclick="delivery_fee()">
    <label for="East">East</label><br>
    <input type="radio" id="north" name="area" onclick="delivery_fee()">
    <label for="North">North</label><br>
    <input type="radio" id="lagos" name="area" onclick="delivery_fee()">
    <label for="Lagos">Lagos</label>
  </div>
</div>

<div id="page2" style="display:none;">
  <div>
    <h2 class="text-info" align="center">Hard copy:&nbsp;<sup>&#8358;</sup> <span id="brice">xxxx</span> <br> <br> </h2>
    <span>Note: After recieving your details, we will forward our payment details to you and ship the book(s) to you after confirmation</span>
  </div>

</div>
</form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" onclick="go_next()" id="next">Next >></button>
  <button type="button" class="btn btn-primary" onclick="go_back()" id="back" style="display:none;"> <<  Back</button>
  <button type="button" class="btn btn-primary" id="thank_you" style="display:none;">Check Out</button>
</div>

Aucun commentaire:

Enregistrer un commentaire