Приращение (+ =) в Js продолжает добавляться к переменной, пока я не обновлю sh страницу

Question

Я создал функцию, которая изменяет стоимость доставки в зависимости от местоположения. Каждый раз, когда я go возвращаюсь, чтобы изменить местоположение, вместо того, чтобы просто прибавлять к цене за доставку, он добавляет к предыдущей сумме. Мне нужен код, который позволяет go вернуться к исходной цене после нажатия кнопки «Назад» и изменения местоположения.

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>

Answer 1

Стоимость книги просто необходимо сбрасывать каждый раз при вызове функции.

var DEFAULT_BOOK_FEE = 3500;
var book_fee = DEFAULT_BOOK_FEE;

function delivery_fee() {
  book_fee = DEFAULT_BOOK_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>

Answer 2

Каждый раз, когда устанавливается флажок, вызывается delivery_fee и к book_fee добавляется новая комиссия.

Вместо этого используйте другую переменную с именем total_fee, например, которая содержит общую плату. вот так:

var book_fee = 3500;
var total_fee;

function delivery_fee() {
  if (document.getElementById('swest').checked) {
    total_fee = book_fee + 1600;
  } else if (document.getElementById('lagos').checked) {
    total_fee = book_fee + 700;
  } else if (document.getElementById('east').checked) {
    total_fee = book_fee + 2500;
  } else if (document.getElementById('north').checked) {
    total_fee = book_fee + 2500;
  } else {
    total_fee = book_fee + 2500;
  }
}