Javascript if function not working properly with getElemenById

Question

okey so I got this, kinda look at it like u have a website were u can redeem points, now when I click redeem I dont want that the number given is lesser than 4 points and that the number given is greater than your balance of points.

Now when I click the button when the input is 2, I will get 2 alerts (alerts are for testing)

But, as soon as I click the button when I put an number lesser than my balance, I also get 2 alerts, saying number = (for example) 7 and balancehidden = 100. So I dont understand why I get those alerts. because its lesser than the balance and greater than 4.

also this is the field the balance get stored when refreshBalance() get called:

 <input type=hidden id="balancehidden" name="balancehide" 
                      value=""/>

Javascript :

<input type="text" id="number"><br>
        <button type="button" class="btn btn-success" id="redeem">Redeem</button>   

     <body onload="refreshBalance()">

            <script type="text/javascript">

            document.getElementById('redeem').onclick = function() {

           if(document.getElementById('number').value < 4 || document.getElementById('number').value > document.getElementById("balancehidden").value)
            {


            alert(document.getElementById("number").value);
            alert(document.getElementById("balancehidden").value);
            }
            }
            </script>

Why are your `input` and `button` tags outside of the body? Those should be inside your body. — litel, Apr 06 '16 at 20:56
Hey, if I could just add my 2 cents. Extracting values from your DOM elements adds an extra layer of complexity you don't necessarily have to deal with. Creating a local model of your data is a much better way to access the information as you need it. Your view layer should only express the UI elements — Halfpint, Apr 06 '16 at 21:08

score 3 · Accepted Answer · edited May 23 '17 at 12:24

3

You're trying to see whether one string is greater than another string, but what you really want to do is compare numbers. Counterintuitively, "4" > "100" === true while 4 > 100 === false. Convert your values to numbers:

if(parseInt(document.getElementById('number').value) < 4 || parseInt(document.getElementById('number').value) > parseInt(document.getElementById("balancehidden").value))

Use parseFloat instead of parseInt if you expect decimals, and be aware of the radix parameter.

edited May 23 '17 at 12:24

Community

1
1

answered Apr 06 '16 at 20:58

TAGraves

1,369
1
9
11

Thanks for the solution! – Nick Apr 06 '16 at 21:08

score 2 · Answer 2 · answered Apr 06 '16 at 21:04

The problem is that you are trying to compare string values instead of integers. Please check this jsfiddle with working code: https://jsfiddle.net/2kbcuhg9/

document.getElementById('redeem').onclick = function() {
  var number = parseInt(document.getElementById('number').value);
  var balance = parseInt(document.getElementById('balancehidden').value);
  if(number < 4 || number > balance) {
    alert(document.getElementById("number").value);
    alert(document.getElementById("balancehidden").value);
  }
}

Javascript if function not working properly with getElemenById

2 Answers2