html - javascript if statement return value

I am trying to get a numeric value from an html input box called ValuationChoice(labeled as Job Value) and pass it through a Javascript function(GetPermit_Price) where it will get the permit cost by looping through value interred into ValuationChoice. The result value keeps ing up as 0 no matter what I type in the ValuationChoice input box. Any advice on how I can make this work would be greatly appreciated. Thanks in Advance!

function GetPermit_Price() {

  var PermitCost = 0;
  var theForm = document.forms["cakeform"];
  var Valuation =
    theForm.elements["ValuationChoice"];

  if (Valuation > 0 && Valuation <= 1000) {
    PermitCost = 0;
  }

  if (Valuation > 1001 && Valuation <= 50000) {
    PermitCost = (((Valuation - 1000) / 1000) * 5.50) + 25;
  }

  if (Valuation > 50001 && Valuation <= 100000) {
    PermitCost = (((Valuation - 50000) / 1000) * 4.50) + 294.50;
  }

  if (Valuation > 100001 && Valuation < 500000) {
    PermitCost = (((Valuation - 100000) / 1000) * 3.50) + 519.50;
  }

  if (Valuation > 500001) {
    PermitCost = (((Valuation - 500000) / 1000) * 2.25) + 1919.50;
  }

  return PermitCost;
}

function calculateTotal() {

  var cakePrice = GetPermit_Price() + 5 + 10.00;

  var divobj7 = document.getElementById('permitFee');
  divobj7.style.display = 'block';
  divobj7.innerHTML = "Permit Fee: $" +
    GetPermit_Price();
}

function hideTotal() {
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Strict//EN" 
    " 
    strict.dtd">
<html xmlns="">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Cake Form</title>
  <script type="text/javascript" src="js/formcalculations.js"></script>
  <link href="styles/cakeform.css" rel="stylesheet" type="text/css" />

</head>

<body onload='hideTotal()'>
  <div id="wrap">
    <form action="" id="cakeform" onsubmit="return 
    false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>Calculate Permit</legend>

            <label>Job Value</label>
            <input type="text" id="ValuationChoice" name='ValuationChoice' />

            <p>
            </p>
            <div id="permitFee"></div>
            <br/>

            <br/>
            <div id="totalPrice"></div>

            <input type='submit' id='submit' value='Calculate Permit' onclick="calculateTotal()" />

          </fieldset>
        </div>

      </div>
    </form>
  </div>
  <!--End of wrap-->

</body>

</html>

function GetPermit_Price() {

  var PermitCost = 0;
  var theForm = document.forms["cakeform"];
  var Valuation =
    theForm.elements["ValuationChoice"];

  if (Valuation > 0 && Valuation <= 1000) {
    PermitCost = 0;
  }

  if (Valuation > 1001 && Valuation <= 50000) {
    PermitCost = (((Valuation - 1000) / 1000) * 5.50) + 25;
  }

  if (Valuation > 50001 && Valuation <= 100000) {
    PermitCost = (((Valuation - 50000) / 1000) * 4.50) + 294.50;
  }

  if (Valuation > 100001 && Valuation < 500000) {
    PermitCost = (((Valuation - 100000) / 1000) * 3.50) + 519.50;
  }

  if (Valuation > 500001) {
    PermitCost = (((Valuation - 500000) / 1000) * 2.25) + 1919.50;
  }

  return PermitCost;
}

function calculateTotal() {

  var cakePrice = GetPermit_Price() + 5 + 10.00;

  var divobj7 = document.getElementById('permitFee');
  divobj7.style.display = 'block';
  divobj7.innerHTML = "Permit Fee: $" +
    GetPermit_Price();
}

function hideTotal() {
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Strict//EN" 
    "http://www.w3/TR/xhtml1/DTD/xhtml1- 
    strict.dtd">
<html xmlns="http://www.w3/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Cake Form</title>
  <script type="text/javascript" src="js/formcalculations.js"></script>
  <link href="styles/cakeform.css" rel="stylesheet" type="text/css" />

</head>

<body onload='hideTotal()'>
  <div id="wrap">
    <form action="" id="cakeform" onsubmit="return 
    false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>Calculate Permit</legend>

            <label>Job Value</label>
            <input type="text" id="ValuationChoice" name='ValuationChoice' />

            <p>
            </p>
            <div id="permitFee"></div>
            <br/>

            <br/>
            <div id="totalPrice"></div>

            <input type='submit' id='submit' value='Calculate Permit' onclick="calculateTotal()" />

          </fieldset>
        </div>

      </div>
    </form>
  </div>
  <!--End of wrap-->

</body>

</html>

Share Improve this question edited Dec 6, 2018 at 16:02 Jeremy Thille 26.4k12 gold badges47 silver badges64 bronze badges asked Dec 6, 2018 at 15:40 Joshua Calhoun 131 silver badge3 bronze badges

Unrelated, but sticking with JS conventions makes code much easier to read (and not randomly inserting newlines). I also almost never rely on JS type coercion. In any case, you're trying to pare a DOM element to a number--pare the value instead. – Dave Newton Commented Dec 6, 2018 at 15:45

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

Valuation is the input field not its value.

try:

var Valuation = theForm.elements["ValuationChoice"].value;

So first off your input should be type=number also why don't you just find the value of the input like the below

const Valuation = document.getElementById('ValuationChoice').value;

and to be sure simply console log what you get back

console.log(Valuation);

This will help you debug and see if you are even getting a number back which you probably wont be if your using a text input.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - javascript if statement return value - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)