JavaScript Issues with IF Statements breaking functionality

Question

Currently having a lot of issue with a certain web page that I've had to create for a college assignment - as it's a few text input boxes conjoined with JavaScript as to calculate a hypothetical 'insurance quote' based on the users inputs, the aforementioned input boxes running through calculations as to find out a 'final quote'. My entire HTML/JavaScript web-page is as follows:

function getQuote() { // defines a function where it takes the vehicle's price and times it by values dependant on the inputted age.
  var txtAge = document.getElementById("age").value;
  var txtVehiclePrice = document.getElementById("vehiclePrice").value;
  var txtCityDistance = document.getElementById("cityDistance").value;
  var txtNoClaims = document.getElementById("noClaims")

  var ageFactor = 0; // defines ageFactor as an empty variable so that it can be manipulated by javascript later.
  var vehiclePriceFactor = 0; // defines vechiclePriceFactor as an empty variable so that it can be manipulated by javascript later.
  var cityDistanceFactor = 0;
  var noClaimsFactor = 0;

  if (txtAge < 18) {
    ageFactor = 3;
  } else if (txtAge >= 18 && txtAge < 21) {
    ageFactor = 2; // defines the "age factor", which is the times amount that the vehicle's value is multiplied by to find out the final price
  } else if (txtAge > 22 && txtAge < 31) { // for example if the age inputt+ed is greated than 22 but below 31 the age factor will be 1.5x
    ageFactor = 1.5;
  } else {
    ageFactor = 1.2;
  }

  vehiclePriceFactor = txtVehiclePrice / 20; // divides the vehicle's inputted price by 20, creating the price factor used in the calculation

  if (txtCityDistance < 10) {
    cityDistanceFactor = 1000;
  } else if (txtCityDistance >= 10 && txtCityDistance < 50) {
    cityDistanceFactor = 500;
  } else {
    cityDistanceFactor = 200;
  }

  if (txtNoClaims < 0) {
    noClaimsFactor = 0;
  } else if (txtNoClaims == 1) {
    noClaimsFactor = 500;
  } else if (txtNoClaims == 2) {
    noClaimsFactor = 750; // If the user's inputted number for the noclaims box is from 1-5, set the value and if it's over 5 set it to 1750
  } else if (txtNoClaims == 3) {
    noClaimsFactor = 1000;
  } else if (txtNoClaims == 4) {
    noClaimsFactor = 1250;
  } else(txtNoClaims > 4) {
    noClaimsFactor = 1750;
  }

  quoteResult = ((vehiclePriceFactor * ageFactor + cityDistanceFactor) - noClaimsFactor); // times the vehicle's price factor by the age factor, ading the city distance factor and taking the no claims factor from the end result


  document.getElementById("result").value = quoteResult; // sets the result box to the result of the previous calculation, determining price
}

function validateQuote() {
  var correct = true;

  var testSubject = document.getElementById("age").value;
  var testSubject1 = document.getElementById("cityDistance").value;
  var testSubject2 = document.getElementById("noClaims").value;

  if (testSubject == "") {
    alert("Age must be filled out.");
    correct = false;
  }

  if (testSubject1 == "") {
    alert("Please input a distance from the City Centre.");
    correct = false;
  }

  if (testSubject2 == "") {
    alert("Please fill out the number of No Claims, or input a '0' if non applicable.")
    correct = false;
  }

  if (correct == true) {
    getQuote();
  }
}

@charset "utf-8";

/* CSS Document */

body {
  background-color: springgreen;
}

body {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
  font-size: 24;
}

.DivNavBar {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
  font-size: 24;
}

.DivLogo {
  width: 35%;
  height: 35%;
}

.DivHomeBanner {
  width: 40%;
  height: 40%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
}

.DivTopLeft {
  background-color: blueviolet;
  width: 50%;
  height: 300px;
  float: left;
}

.DivTopRight {
  background-color: deepskyblue;
  width: 50%;
  height: 300px;
  float: left;
}

.DivContent {
  clear: both;
}

.DivCarOffer1 {
  background-color: #333333;
  width: 250px;
  margin-top: 50px;
  margin-left: 28%;
  margin-bottom: 50px;
  display: inline-block;
}

.Offer1Img {
  width: 100%;
  height: 90%;
  text-align: center;
}

.Offer1Name {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: ghostwhite;
  text-align: center;
}

.Offer1BadPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: red;
  text-align: center;
}

.Offer1GoodPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 20;
  color: greenyellow;
  text-align: center;
  margin-bottom: 25px;
}

.DivCarOffer2 {
  background-color: #333333;
  width: 250px;
  margin-top: 50px;
  margin-left: 100px;
  margin-bottom: 50px;
  display: inline-block;
}

.Offer2Img {
  width: 100%;
  height: 90%;
  text-align: center;
}

.Offer2Name {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: ghostwhite;
  text-align: center;
}

.Offer2BadPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: red;
  text-align: center;
}

.Offer2GoodPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 20;
  color: greenyellow;
  text-align: center;
  margin-bottom: 25px;
}

.DivCarOffer3 {
  background-color: #333333;
  width: 250px;
  margin-top: 50px;
  margin-left: 100px;
  margin-bottom: 50px;
  display: inline-block;
}

.Offer3Img {
  width: 100%;
  height: 90%;
  text-align: center;
}

.Offer3Name {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: ghostwhite;
  text-align: center;
}

.Offer3BadPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: red;
  text-align: center;
}

.Offer3GoodPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 20;
  color: greenyellow;
  text-align: center;
  margin-bottom: 25px;
}

.QuoteCalc {
  text-align: center;
}

.Review1 {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.Review2 {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.TestimonialImg1 {
  height: 50%;
  text-align: center;
}

.DivTestiImg1 {
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 210px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.DivBox {
  background-color: white;
  width: 300px;
  border: 25px solid;
  padding: 25px;
  margin: 25px;
}

HTML:

<center> <img src="StudentSureLogov3.png" class="DivLogo" alt="StudentSure Logo"> </center>
<div class="NavBar">
  <ul>
    <li><a class="active" href="StudentSureHome.html">Home</a>
    </li>
    <li><a href="StudentSureAbout.html">About</a></li>
    <li><a href="StudentSureQuotes.html">Quotes</a></li>
    <li><a href="StudentSureTestimonials.html">Testimonials </a></li>
  </ul>
</div>
<div class="QuoteCalc">
  <p> Market Price of Vehicle: <br> </p>
  <input type="text" id="vehiclePrice"><br>

  <p> Age: <br></p>
  <input type="text" id="age"><br>

  <p> Distance from City Centre: <br> </p>
  <input type="text" id="cityDistance"><br>

  <p> No. of Years with No Claims: <br> </p>
  <input type="text" id="noClaims"><br>

  <p> <button onClick="validateQuote()"> Get Quote </button></p>
  <p> RESULT <br> </p>
  <input type="text" id="result"> <br>
</div>

As you can see, trying to input anything into the boxes doesn't function correctly (both as part of a separate web-page, alongside the code snippet environment) and the problem lies within the-

if (txtNoClaims < 0) {
  noClaimsFactor = 0;
} else if (txtNoClaims == 1) {
  noClaimsFactor = 500;
} else if (txtNoClaims == 2) {
  noClaimsFactor = 750; // If the user's inputted number for the noclaims box is from 1-5, set the value and if it's over 5 set it to 1750
} else if (txtNoClaims == 3) {
  noClaimsFactor = 1000;
} else if (txtNoClaims == 4) {
  noClaimsFactor = 1250;
} else(txtNoClaims > 4) {
  noClaimsFactor = 1750;
}

-part of the code as hiding the final 'else' part of the code allows the calculator to function, although the No Claims box doesn't work at all.

(keep in mind I'm a very novice programmer and I'm not adept whatsoever with any sort of programming language, so very simple help and solutions would be greatly appreciated - apologies if I've formatted or incorrectly posted this submission because it's my first time here and I was recommended to try here)

Thanks in advance.

An else expression has no conditions; else (txtNoClaims > 4) is invalid syntax, it should be else if or just else { ... } — Phil
– Phil, Commented Jan 22, 2019 at 12:19
You have to change last else condition to -> else { noClaimsFactor = 1750; } — mitesh7172
– mitesh7172, Commented Jan 22, 2019 at 12:42
Notice also a gap in ageFactor, 21 - 22 years old vechiles will get 1.2, which probably is not intentional? — Teemu
– Teemu, Commented Jan 22, 2019 at 12:49

Nina Scholz · Accepted Answer · 2019-01-22 12:19:28Z

2

else does not have a conditional part. The check works only with an if statement.

if (txtNoClaims < 0) {         // condition with if
    noClaimsFactor = 0;
// ....
} else if (txtNoClaims == 4) { // condition with if
    noClaimsFactor = 1250;
} else {                       // no condition
    noClaimsFactor = 1750;
}

answered Jan 22, 2019 at 12:19

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsadev.net · Accepted Answer · 2019-01-22 12:36:01Z

Got that fixed for you, here are the problems:

at first you are missing some ;.
Then you should Change your input-types from text to number.
txtNoClaims was facing the whole html element and not its value.
you're using else(txtNoClaims > 4) what is an syntax-error, use else{…} or else if(txtNoClaims > 4){…} instead

working example:

function getQuote() { // defines a function where it takes the vehicle's price and times it by values dependant on the inputted age.
  var txtAge = document.getElementById("age").value;
  var txtVehiclePrice = document.getElementById("vehiclePrice").value;
  var txtCityDistance = document.getElementById("cityDistance").value;
  var txtNoClaims = document.getElementById("noClaims").value;

  var ageFactor = 0; // defines ageFactor as an empty variable so that it can be manipulated by javascript later.
  var vehiclePriceFactor = 0; // defines vechiclePriceFactor as an empty variable so that it can be manipulated by javascript later.
  var cityDistanceFactor = 0;
  var noClaimsFactor = 0;

  if (txtAge < 18) {
    ageFactor = 3;
  } else if (txtAge >= 18 && txtAge < 21) {
    ageFactor = 2; // defines the "age factor", which is the times amount that the vehicle's value is multiplied by to find out the final price
  } else if (txtAge > 22 && txtAge < 31) { // for example if the age inputt+ed is greated than 22 but below 31 the age factor will be 1.5x
    ageFactor = 1.5;
  } else {
    ageFactor = 1.2;
  }

  vehiclePriceFactor = txtVehiclePrice / 20; // divides the vehicle's inputted price by 20, creating the price factor used in the calculation

  if (txtCityDistance < 10) {
    cityDistanceFactor = 1000;
  } else if (txtCityDistance >= 10 && txtCityDistance < 50) {
    cityDistanceFactor = 500;
  } else {
    cityDistanceFactor = 200;
  }

  if (txtNoClaims < 0) {
    noClaimsFactor = 0;
  } else if (txtNoClaims == 1) {
    noClaimsFactor = 500;
  } else if (txtNoClaims == 2) {
    noClaimsFactor = 750; // If the user's inputted number for the noclaims box is from 1-5, set the value and if it's over 5 set it to 1750
  } else if (txtNoClaims == 3) {
    noClaimsFactor = 1000;
  } else if (txtNoClaims == 4) {
    noClaimsFactor = 1250;
  } else if(txtNoClaims > 4) { // else(txtNoClaims > 4) is an syntax-error. use else if(){...} or else {...}
    noClaimsFactor = 1750;
  }

  quoteResult = ((vehiclePriceFactor * ageFactor + cityDistanceFactor) - noClaimsFactor); // times the vehicle's price factor by the age factor, ading the city distance factor and taking the no claims factor from the end result


  document.getElementById("result").value = quoteResult; // sets the result box to the result of the previous calculation, determining price
}

function validateQuote() {
  var correct = true;

  var testSubject = document.getElementById("age").value;
  var testSubject1 = document.getElementById("cityDistance").value;
  var testSubject2 = document.getElementById("noClaims").value;

  if (testSubject == "") {
    alert("Age must be filled out.");
    correct = false;
  }

  if (testSubject1 == "") {
    alert("Please input a distance from the City Centre.");
    correct = false;
  }

  if (testSubject2 == "") {
    alert("Please fill out the number of No Claims, or input a '0' if non applicable.");
    correct = false;
  }

  if (correct == true) {
    getQuote();
  }
}

@charset "utf-8";

/* CSS Document */

body {
  background-color: springgreen;
}

body {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
  font-size: 24;
}

.DivNavBar {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
  font-size: 24;
}

.DivLogo {
  width: 35%;
  height: 35%;
}

.DivHomeBanner {
  width: 40%;
  height: 40%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
}

.DivTopLeft {
  background-color: blueviolet;
  width: 50%;
  height: 300px;
  float: left;
}

.DivTopRight {
  background-color: deepskyblue;
  width: 50%;
  height: 300px;
  float: left;
}

.DivContent {
  clear: both;
}

.DivCarOffer1 {
  background-color: #333333;
  width: 250px;
  margin-top: 50px;
  margin-left: 28%;
  margin-bottom: 50px;
  display: inline-block;
}

.Offer1Img {
  width: 100%;
  height: 90%;
  text-align: center;
}

.Offer1Name {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: ghostwhite;
  text-align: center;
}

.Offer1BadPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: red;
  text-align: center;
}

.Offer1GoodPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 20;
  color: greenyellow;
  text-align: center;
  margin-bottom: 25px;
}

.DivCarOffer2 {
  background-color: #333333;
  width: 250px;
  margin-top: 50px;
  margin-left: 100px;
  margin-bottom: 50px;
  display: inline-block;
}

.Offer2Img {
  width: 100%;
  height: 90%;
  text-align: center;
}

.Offer2Name {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: ghostwhite;
  text-align: center;
}

.Offer2BadPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: red;
  text-align: center;
}

.Offer2GoodPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 20;
  color: greenyellow;
  text-align: center;
  margin-bottom: 25px;
}

.DivCarOffer3 {
  background-color: #333333;
  width: 250px;
  margin-top: 50px;
  margin-left: 100px;
  margin-bottom: 50px;
  display: inline-block;
}

.Offer3Img {
  width: 100%;
  height: 90%;
  text-align: center;
}

.Offer3Name {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: ghostwhite;
  text-align: center;
}

.Offer3BadPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  color: red;
  text-align: center;
}

.Offer3GoodPrice {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 20;
  color: greenyellow;
  text-align: center;
  margin-bottom: 25px;
}

.QuoteCalc {
  text-align: center;
}

.Review1 {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.Review2 {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.TestimonialImg1 {
  height: 50%;
  text-align: center;
}

.DivTestiImg1 {
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 210px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.DivBox {
  background-color: white;
  width: 300px;
  border: 25px solid;
  padding: 25px;
  margin: 25px;
}

HTML:

<center> <img src="StudentSureLogov3.png" class="DivLogo" alt="StudentSure Logo"> </center>
<div class="NavBar">
  <ul>
    <li><a class="active" href="StudentSureHome.html">Home</a>
    </li>
    <li><a href="StudentSureAbout.html">About</a></li>
    <li><a href="StudentSureQuotes.html">Quotes</a></li>
    <li><a href="StudentSureTestimonials.html">Testimonials </a></li>
  </ul>
</div>
<div class="QuoteCalc">
  <p> Market Price of Vehicle: <br> </p>
  <input type="number" id="vehiclePrice"><br>
  
  <p> Age: <br></p>
  <input type="number" id="age"><br>

  <p> Distance from City Centre: <br> </p>
  <input type="number" id="cityDistance"><br>

  <p> No. of Years with No Claims: <br> </p>
  <input type="number" id="noClaims"><br>

  <p> <button onClick="validateQuote()"> Get Quote </button></p>
  <p> RESULT <br> </p>
  <input type="number" id="result"> <br>
</div>

Collectives™ on Stack Overflow

JavaScript Issues with IF Statements breaking functionality

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related