compare two variables in an if statement javascript

Question

I was hoping a friendly soul could help me out with my javascript problem here.

I am trying to learn a bit about javascript, and coding in general, doing this I am trying to make my own in house auction system, and to do this I do not want people to be able to make a bid on a product which are the same or below, so to do this I want to disable the submit button and so on.

My issue is that I started out working with ID's and learned that if I have multiple elements with the same ID this will not work, so I started working with class instead.

I made the the follow which does not seem to work for some reason, it will not compare the two numbers :(

var inputOne = document.getElementsByClassName('form-control new_bid');
var inputTwo = document.getElementsByClassName('form-control old_bid');
setInterval(function() {
  if (inputOne >= inputTwo)
    $(":submit").removeAttr("disabled");
  else
    $(":submit").attr("disabled", "disabled");
}, 1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class='form-control old_bid' id="current_bid" name="current_bid" readonly>
<input type='text' class='form-control new_bid' id='place_bid' name='place_bid' placeholder='The bid you make are in ".getUser(false)->getOffice()->getRegion()->getCurrency()."' pattern='^[0-9]*$'>
<input id="submit_bid" type="submit" name="submit_bid" class="btn btn-primary" value="Place bid" />

Thanks in advance!

Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — helb, Feb 13 '19 at 11:22
side not : the approach you are doing is not a recommended one , its better to go with custom dynamic ids .i fu have more than one element with same class then this might be an issue — Arunprasanth K V, Feb 13 '19 at 11:23

Jack Bashford · Answer 1 · 2019-02-13T11:28:12.570

You need to select which input you're using, and parse its value to an integer. Also, change the last bit slightly:

var inputOne = parseInt(document.getElementsByClassName('form-control new_bid')[0].value);
var inputTwo = parseInt(document.getElementsByClassName('form-control old_bid')[0].value);
  setInterval(function () {
    if (inputOne >= inputTwo)
      $("#submit-bid").removeAttr("disabled");
      else
        $("submit-bid").attr("disabled", "disabled");
  }, 1000);

Although since you're already using jQuery and you have IDs, just do this:

var inputOne = parseInt($("#current_bid").val()),
    inputTwo = parseInt($("#place_bid").val());
setInterval(function () {
    if (inputOne >= inputTwo)
      $("#submit-bid").removeAttr("disabled");
      else
        $("submit-bid").attr("disabled", "disabled");
  }, 1000);

Hi Jack, Thank you alot of trying to help me out here! I tried what you posted with parse its value to an integer, but without any luck. If I do this the way you did with using the id for the submit button, the button will not be greyed out at all like it did before. but also if I use the method i used with :submit, the disabled is not removed even if the number is higher. If i try from the console to call the two variables inputOne - inputTwo, i get "NaN" on both of them :/ — pkj, Feb 13 '19 at 11:40

caramba · Accepted Answer · 2019-02-13T14:16:27.397

First of all, you don't want to use setInterval! You want to use an EventListener and in this case the keyup event is kind a nice.

Then you can use querySelector so you do not need jQuery to use $('.class-selector')

And as the others already pointed out you need to use element.value to get the value of the desired element.

Then you need to use parseInt to get the input value from string to number to make a number comparison.

(Note I've removed the readonly on .new_bid so you can play with the snippet)

(function(){
  var inputOne = document.querySelector('.new_bid');
  var inputTwo = document.querySelector('.old_bid');
  var submitButton = document.querySelector('#submit_bid');
  
  var myValuesChanged = function() {
      if (parseInt(inputOne.value, 10) >= parseInt(inputTwo.value, 10)) {
          submitButton.disabled = false;
      } else {
          submitButton.disabled = true;
      }
      
      console.log('submitButton disabled: ' + submitButton.disabled);
  }
  
  inputOne.addEventListener("keyup", myValuesChanged, false);
  inputTwo.addEventListener("keyup", myValuesChanged, false);
  
})();

<input type="text" class='form-control old_bid' id="current_bid" name="current_bid">
<input type='text' class='form-control new_bid' id='place_bid' name='place_bid' placeholder='The bid you make are in ".getUser(false)->getOffice()->getRegion()->getCurrency()."' pattern='^[0-9]*$'>
<input id="submit_bid" type="submit" name="submit_bid" class="btn btn-primary" value="Place bid" />

Hi! Thank you for this, it looks like a good approach, I tried it out, the button does not start disabled, but after first key stroke it will be, but even after the value reaches higher number than the current one it will not unlock again :/ — pkj, Feb 13 '19 at 11:47
@pkj I've updated the answer, I've added parseInt to make a number comparison, before it was just a lucky string comparison. Is it now working as you want it? — caramba, Feb 13 '19 at 11:51

score 1 · Answer 3 · answered Feb 13 '19 at 11:21

1

You need to use inputOne.value to get the current value of the input field!

Good luck learning how to code :D

answered Feb 13 '19 at 11:21

Antonio Gamiz Delgado

1,871
1
12
33

1

Also small tip, you don't have to include all the classes. You can just call old_bid and new_bid! – Wimanicesir Feb 13 '19 at 11:22
1

`getElementsByClassName` returns an array, see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – Leo Feb 13 '19 at 11:23

Faheel Khan · Answer 4 · 2019-02-13T11:32:57.117

0

You can use .value

var inputOne = document.getElementsByClassName('form-control new_bid')[0].value;
    var inputTwo = document.getElementsByClassName('form-control old_bid')[0].value;
    setInterval(function() {
      if (inputOne >= inputTwo)
        $(":submit").removeAttr("disabled");
      else
        $(":submit").attr("disabled", "disabled");
    }, 1);

edited Feb 13 '19 at 11:32

answered Feb 13 '19 at 11:27

Faheel Khan

556
4
4

compare two variables in an if statement javascript

4 Answers4