Javascript returning incorrecct results

Javascript returning incorrecct results

Before I start, I would like to say that if this question has already been answered please direct me to the appropriate answer.

I am having an issue with my Java Script function not returning an expected value. I am trying to use it to validate text input for a number range, and, if the input is outside that range, return a custom error message.

here is the HTML for one of the fields within a the form which I am trying to validate:

And here is the associated Javascript:

function bottomAirF() {      var x, text;      x = document.getElementById("bottomair");      if (isNaN(x) || x < 33 || x > 40) {          text = "Temp Out of Tolerance";      } else {          text = " ";      }      document.getElementById("bottomairerror").innerHTML = text;  }  

What I am trying to accomplish is to have the function check to see if the entered number is between 33 and 40. If the number is not between these two numbers, the code should return the error message "Temp Out of Tolerance" but if the number is between 33 and 40 it should return nothing. As it stands right now, any number (or lack there of) returns the error message.

This code is modified from W3School's Comparison function.

I have tried everything that I can think of and it is still not working properly so any help would be greatly appreciated.

Answer by Shailendra Sharma for Javascript returning incorrecct results

you are missing .value

x = document.getElementById("bottomair").value;  

Answer by Tomer Keisar for Javascript returning incorrecct results

please instead this line:

document.getElementById("bottomair");  

write this line:

document.getElementById("bottomair").value;  

Answer by sarvesh for Javascript returning incorrecct results

It should be like this

x = document.getElementById("bottomair").value;      if (isNaN(x) || parseInt(x,10) < 33 || parseInt(x) > 40) {          text = "Temp Out of Tolerance";      } else {          text = " ";      }  

Answer by Sungho Hong for Javascript returning incorrecct results

You've done very well all you needed was to add value to document.getElementById("bottomair")

Here is the solution I've just added the .value

x = document.getElementById("bottomair").value;

Answer by Retic for Javascript returning incorrecct results

Definitely Missing .value

     $(document).ready(function () {            $("#btnCalc").click(              function () {                  bottomAirF();              }                      );      });        function bottomAirF() {      var x, text;      x = document.getElementById("bottomair").value;        if (isNaN(x) || x < 33 || x > 40) {          text = "Temp Out of Tolerance";      } else {          text = " ";      }        document.getElementById("bottomairerror").innerHTML = text;  }  

See Simple JSFiddle Example

Answer by AdityaParab for Javascript returning incorrecct results

Although all the posted answers are technically correct, I believe this solution is neither maintenable nor scalable.

You have hard dependency on element ids which are static.

Imaging if, in future, you want to add more of these tds that perform such validation, are you going to keep track of newly added rows? Although, technically you can but anthropologically its mentally draining and things like this deny to make use of the very purpose the computers and software is designed - Automation. Something that lets you do creative tasks and have the mechanical stuff done by the computer.

For this philosophical reason, I believe this piece of code is a much better solution.

HTML - Get rid of Ids and pass this meaning current element (which is input in this case) as a parameter to the function.

JS - use DOM accessors to find next td and update it's innerHTML

function bottomAirF(elem) {      var x, text;      x = +elem.value; // Prepended + sign will parse whatever follows to integer.      if (isNaN(x) || x < 33 || x > 40) {          text = "Temp Out of Tolerance";      } else {          text = " ";      }      elem.parentNode.nextElementSibling.innerHTML = text;  }  

EDIT: For the updated requirements

To add new validations and conditions.

Let's say you have 3 textboxes which you need validation on. Each of these textboxes have different validation parameters.

First Should only accept values between 1 and 10

Second should only accept values between 11 and 33

Third should only accept values between 33 and 41

So the updated code would be, (the name of the function will be changed to something generic, like, validate)

Notice that there are two additional attributes on the input element viz val-min and val-max that specify the range.

JS Code

function validate(elem) {      var x, text;      x = +elem.value; // Prepended + sign will parse whatever follows to integer.      var min = elem.getAttribute('val-min');      var max = elem.getAttribute('val-max')      if (isNaN(x) || x < min || x > max) {          text = "Temp Out of Tolerance";      } else {          text = " ";      }      elem.parentNode.nextElementSibling.innerHTML = text;  }  

Working Fiddle

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72