Question

目前，我必须为大学分配的特定网页存在很多问题-因为它是一些文本输入框与JavaScript结合在一起，用于根据用户输入来计算假设的“保险报价” ，上述输入框会通过计算来找出“最终报价”。我的整个HTML / JavaScript网页如下：

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>

如您所见，尝试在框内输入任何内容均无法正常工作（都是作为单独网页的一部分，以及代码段环境），并且问题出在-

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;
}

-部分代码隐藏了代码的最后“其他”部分，尽管“无声明”框根本不起作用，但计算器仍然可以运行。

（请记住，我是一个非常新手的程序员，并且我不擅长使用任何一种编程语言，因此非常感谢非常简单的帮助和解决方案-如果我格式化或错误地发布了此提交内容，我们深表歉意因为这是我第一次来，建议我在这里尝试）

谢谢。

Answer 1

else没有条件部分。支票仅适用于if statement。

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

Answer 2

为您解决的问题如下：

起初，您缺少一些;。
然后，您应该将输入类型从文本更改为数字。
txtNoClaims面对着整个html元素，而不是它的价值。
您使用else(txtNoClaims > 4)是什么语法错误，请改用else{…}或else if(txtNoClaims > 4){…}

工作示例：

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>

IF语句破坏功能的JavaScript问题

2 个答案: