Search code examples
quoteinstant

Else if calculation not working, program works if i remove else if and have only 1 formula


I have been tyring to create a form that a customer could enter the size of their yard and get a quote. If i only use one formula with no if else it works fine, but when I add the other formula options to create accurate pricing I get no results. I have read multiple suggestions and have tried any i could fine with no avail.

<head>
<title>Test</title>
</head>
<body>
<form name="Instant Quote">
    <table border="1" width="300" height="200" cellpadding="10"            cellspacing="3">
        <tr>
            <th colspan="2">
                <h1>Instant Quote</h1>
            </th>
        </tr>
        <tr>  
            <th>
                <h3>Square Footage of Yard</h3>
            </th>
            <th>
                <input type="number" name="INPUT1" id="input" onchange="calculate();"/>
            </th>    

        </tr>
        <tr>  
            <th>
                <h3>Cost per treatment</h3>
            </th>
            <th>
                <input type="number" name="OUTPUT1" id="output">
            </th>    

        </tr>
        <tr> 



        </tr>
    </table>
</form>

<script type="text/javascript">
function calculate() {
    var USERINPUT1 = document.TESTING.INPUT1.value,
    if (USERINPUT1 >=0 && USERINPUT1 <= 5000) {
    RESULT = (USERINPUT1*.005) + 25;
  } else if (USERINPUT1 >=5001 && USERINPUT1 <= 10000) {
   RESULT = (USERINPUT1*.0045) + 25;
  } else {
    RESULT = (USERINPUT1*.004) + 25;
  }  
   document.TESTING.OUTPUT1.value = RESULT;
}



</script>

<body>

Solution

    • At the end of you USERINPUT1 declaration you probably want a semi-colon instead of a comma.
    • document.TESTING.INPUT1 doesn't exist on the DOM, you can probably use document.getElementById("input") instead.

    function calculate() {
        var USERINPUT1 = document.getElementById("input").value;
        if (USERINPUT1 >=0 && USERINPUT1 <= 5000) {
        RESULT = (USERINPUT1*.005) + 25;
      } else if (USERINPUT1 >=5001 && USERINPUT1 <= 10000) {
       RESULT = (USERINPUT1*.0045) + 25;
      } else {
        RESULT = (USERINPUT1*.004) + 25;
      }  
       document.getElementById("output").value = RESULT;
    }
    <form name="Instant Quote">
        <table border="1" width="300" height="200" cellpadding="10" cellspacing="3">
            <tr>
                <th colspan="2">
                    <h1>Instant Quote</h1>
                </th>
            </tr>
            <tr>  
                <th>
                    <h3>Square Footage of Yard</h3>
                </th>
                <th>
                    <input type="number" name="INPUT1" id="input" onchange="calculate();"/>
                </th>    
    
            </tr>
            <tr>  
                <th>
                    <h3>Cost per treatment</h3>
                </th>
                <th>
                    <input type="number" name="OUTPUT1" id="output">
                </th>    
    
            </tr>
            <tr> 
    
            </tr>
        </table>
    </form>