'Getting element ID's for if/else statements

Working on a project. I need the else statement to work but when I hit the submit button it just redirects to the "if"

<head>
<script>
    var judgmentAmount = document.getElementById('judgmentAmount');
    var amountCollected = document.getElementById('amountCollected');
    function judgmentCalc() {
        if( judgmentAmount - amountCollected < 10000 ) {
            window.open( 'http://afjudgment.com' );
        }else {
            window.open( 'http://www.yahoo.com' );
        }
    }
</script>
</head>

<body>
<h1>Application</h1>
<p>I understand that this application neither obligates me to <b>Affirmative     Judgment</b> nor does it obligate <b>Affirmative Judgment</b> to me.</p>
<h3>Judgment Information</h3>
<form>
    <span>Do you have a case number?</span>
    <input type="text" name="caseNumber" />
    <span>Amount of Judgment</span>
    <input type="text" name="judgmentAmount" id="judgmentAmount"  />
    <span>Amount collected to date</span>
    <input type="text" name="amountCollected" id="amountCollected"  />
    <input type="submit" name="submitButton" onclick="judgmentCalc();" />
</form>

Solution 1:^[1]

You need to access values of these input fields instead of directly working on dom elemens returned by document.getElementById(). You can get value of input using .value property.

var judgmentAmount = document.getElementById('judgmentAmount').value;
var amountCollected = document.getElementById('amountCollected').value;

Solution 2:^[2]

move your variables inside the function so they are properly filled at the time of function execution, and add .value properties of the DOM elements.

try this:

    function judgmentCalc() {
      var judgmentAmount = document.getElementById('judgmentAmount').value;
      var amountCollected = document.getElementById('amountCollected').value;
        if( judgmentAmount - amountCollected < 10000 ) {
            window.open( 'http://afjudgment.com' );
        }else {
            window.open( 'http://www.yahoo.com' );
        }
    }

Solution 3:^[3]

You are only comparing the objects, you need to compare their values

var judgmentAmount = Number(document.getElementById('judgmentAmount').value);
var amountCollected = Number(document.getElementById('amountCollected').value);

Also, convert them to Number before comparison.

function judgmentCalc() {
    var judgmentAmount = Number(document.getElementById('judgmentAmount').value);
    var amountCollected = Number(document.getElementById('amountCollected').value);
    if( judgmentAmount - amountCollected < 10000 ) {
        window.open( 'http://afjudgment.com' );
    }else {
        window.open( 'http://www.yahoo.com' );
    }
}

Solution 4:^[4]

You're getting the HTML DOM elements here:

var judgmentAmount = document.getElementById('judgmentAmount');
var amountCollected = document.getElementById('amountCollected');

So in your judgementCalc method you need to get the values of those elements:

function judgmentCalc() {
    // notice that we're using VALUE here:
    if( judgmentAmount.value - amountCollected.value < 10000 ) {
        window.open( 'http://afjudgment.com' );
    }else {
        window.open( 'http://www.yahoo.com' );
    }
}

Solution 5:^[5]

You need to operate with values of your elements:

function judgmentCalc() {

  var judgmentAmount = +document.getElementById('judgmentAmount').value;
  var amountCollected = +document.getElementById('amountCollected').value;

  if( judgmentAmount - amountCollected < 10000 ) {
    window.open( 'http://afjudgment.com' );
  } 
  else {
    window.open( 'http://www.yahoo.com' );
  }
}

var judgmentAmount = document.getElementById('judgmentAmount') returns only a reference to element with ID "judgmentAmount". If you want to use element's value, you need to do this:

var judgmentAmount = document.getElementById('judgmentAmount').value.

The next step is calculating some amount. You need to convert string to int (with + operator)

typeof judgmentAmount; // "string"

typeof +judgmentAmount; // "number"

Demo

Solution 6:^[6]

Please run the script below, it'll work fine:

<head>
<script>
    function judgmentCalc() {
        var judgmentAmount = document.getElementById('judgmentAmount').value;
        var amountCollected = document.getElementById('amountCollected').value;

        var exp = parseFloat(judgmentAmount) - parseFloat(amountCollected);

        if( exp < 10000 ) {
            window.open( 'http://afjudgment.com' );
        } else {
            window.open( 'http://www.yahoo.com' );
        }
    }
</script>
</head>

Solution 7:^[7]

You have to compare the value of the input element, Please try the following

function judgmentCalc() {
    var judgmentAmount = document.getElementById('judgmentAmount').value;
    var amountCollected = document.getElementById('amountCollected').value;

    if( (judgmentAmount - amountCollected) < 10000 ) {
        window.open( 'http://afjudgment.com' );
    } else {
        window.open( 'http://www.yahoo.com' );
    }
}

It may help you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shoaib Shakeel
Solution 2	or hor
Solution 3
Solution 4	jasonscript
Solution 5
Solution 6	Hardev Sharma
Solution 7	Harsh Sanghani

'Getting element ID's for if/else statements

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]