Calculate percentage function-CodePudding

Struggling to get the desired results, code to test The first two functions work, but the third one for the discount does not. Depending on the number I put in the input field it should apply a discount up to 20% max on increments of 5,(so 1 = 5%, 2 = 10%, etc). No matter the value I put in the input field (deadline) value is stuck in applying the 20% discount. Full bit for testing:

//Dropdown list calculation//
var service_prices = new Array();
service_prices["0"] = 0;
service_prices["1500"] = 1500;
service_prices["4000"] = 4000;
service_prices["8000"] = 8000;

function getServicePrice() {
  var serviceOptionPrice = 0;
  var form = document.forms["formulario"];
  var selectedOption = form.querySelector("#servicePrice");
  if (service_prices[selectedOption.value]) {
    serviceOptionPrice = service_prices[selectedOption.value];
  }
  return serviceOptionPrice;
}

//checkbox calculation//

function extraPrices() {
  var extraPrices = 0;
  var form = document.forms["formulario"];
  var selectedBoxes = form.querySelectorAll("#selectedBox");
  selectedBoxes.forEach((box) => {
    if (box.checked == true) {
      extraPrices  = 400;
    }
  });

  return extraPrices;
}
//discount calc
const getDiscountPercent = (months) => (months < 4 ? months * 0.05 : 0.2);

const getTotal = (servicePrice, extraPrice, months) => {
  const disTotal = servicePrice   extraPrice;
  const discountPercent = getDiscountPercent(months);

  return disTotal - disTotal * discountPercent;
};

//total final calc//

function Total() {
  var finalPrice = (getServicePrice()   extraPrices()) * getDiscountPercent();
  document.getElementById("result").value = "€"   finalPrice;
}

<form action="" id="formulario" name="formulario">
  <p> Type of Service
  </p>
  <select name="serviço" id="servicePrice" onchange="Total()">
    <option value="none">Select a service
    </option>
    <option value="1500">1500€
    </option>
    <option value="4000">4000€
    </option>
    <option value="8000">8000€
    </option>
  </select>
  <br>
  <p>Deadline (months)
  </p> 
  <input type="number"  id="months" name="months" onkeydown="Total()">
  <br>
  <!--checkbox-->
  <h1>DESIRED EXTRAS
  </h1>
  <br>
  <input type="checkbox" name="selectedBox" value="4" id="selectedBox" onclick="Total()"> Who we are
  <input type="checkbox" name="selectedBox" value="5" id="selectedBox" onclick="Total()"> Where we are
  <br>
  <input type="checkbox" name="selectedBox" value="6" id="selectedBox" onclick="Total()"> Gun Gallery
  <input type="checkbox" name="selectedBox" value="7" id="selectedBox" onclick="Total()"> eCommerce
  <br>
  <input type="checkbox" name="selectedBox" value="8" id="selectedBox" onclick="Total()"> Internal Mangement
  <input type="checkbox" name="selectedBox" value="9" id="selectedBox" onclick="Total()"> News
  <br>
  <input type="checkbox" name="selectedBox" value="9" id="selectedBox" onclick="Total()"> Social Network
  <br> 
  <br> 
  <br>
  <!--result-->
  <h1>Estimated Total
  </h1>
  <input type="text"  disabled id="result">
</form>

CodePudding user response：

You are not passing the months amount to getDiscountPercent function, neither taking months value from the input and also I advice you to use onChange event on month input .

function Total() {
  var months = parseInt(document.querySelector('#months').value);
  var finalPrice = (getServicePrice()   extraPrices()) * getDiscountPercent(months);
  document.getElementById("result").value = "€"   finalPrice;
}