Validate number in Javascript

Question

The code is below. I have a user input a radius and it display a area of a circle. I need to make sure the user does not input negative or 0 radius. what should i add to make this work?

<html>
  <head>
<title>Find the area and circumference of a circle</title>
 </head>
  <body>
 <script language="JavaScript">
  function CalculateArea(){
    var radius =document.form1.txtRadius.value;
    document.write("<P>The area of the circle is " + (radius * radius * Math.PI) + "                  </p>");

}
</script>
<form name=form1>
    Enter the radius of circle:
   <input type="text" name="txtRadius" size=10>
   <br>
   <input type="button" value="Calculate" onClick='CalculateArea();'>  
</form>
 </script>
 </body>
   </html>

Have you tried the 'greater than' sign in an 'if' statement? — MDEV, Jul 20 '14 at 20:44
`` -- omg magic! Although you'll need to listen to a `submit` event on the form, not a `click` event on the button. — Niet the Dark Absol, Jul 20 '14 at 20:44
You have all sorts of problems with your code, like `name=form1`. Where are the quotes? Also bad indentation. Camel casing HTML attributes. Probably will work, but bad practice. Might make you think you can use `onClick` in JavaScript. You can't. `document.write()` won`t work with XHTML, so you can't just copy your function off of the page and transport it to your new project. What if it's XHTML? ` — StackSlave, Jul 20 '14 at 21:28

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

See more on document.write() function :

Don't use the write function. Prefere to create new element with document.createElement("p").

DEMO : http://jsbin.com/qabup/1/edit

function print() {
    var p = document.createElement("p"),
        text = Array.prototype.join.call(arguments, ", ");
    p.textContent = text;
    document.getElementById("console").appendChild(p);
    return text;
}

function CalculateArea() {
    var radius = parseInt(document.getElementById('txtRadius').value); // String to int.

    if (0 < radius)
        print("The area of the circle is " + (radius * radius * Math.PI));
    else
        print("Error message.");

    return false;
}

HTML :

<div>
    Enter the radius of circle:
    <input type="text" id="txtRadius" size="10" />
     <br>
    <input type="button" value="Calculate" onclick="CalculateArea()"/>
    <div id="console"></div>
</div>

Old solution :

Try this :

var radius = parseInt(document.form1.txtRadius.value); // String to int.

if (0 < radius)
    document.write("<p>The area of the circle is " + (radius * radius * Math.PI) + "</p>")
else
    document.write("<p>Error message.</p>")

edited May 23 '17 at 12:13

Community

1
1

answered Jul 20 '14 at 20:45

A-312

10,203
4
38
66

Just wondering, why are you using `0 < radius` and not `radius > 0`, which is much more readable? – methyl Jul 20 '14 at 20:47
To me it's more easy with smaller value on the left. [ I think like this : (1, 2, 3, 4... 8) 1 < 8 ] – A-312 Jul 20 '14 at 20:50
More importantly, why have you not corrected OP's (mis)use of `document.write`? – Niet the Dark Absol Jul 20 '14 at 20:50
Thankyou! It was helpful and it worked! just wondering would i be able to do a alert rather than a text message? how should i replace that. thanks again sir! I am new to javascript and apologize for any silly mistakes/questions! – user6996 Jul 20 '14 at 20:55
Niet the dark absol can you please elaborate how it is wrong? the code is still returning output. – user6996 Jul 20 '14 at 20:58
I got the answer to the question. – user6996 Jul 20 '14 at 21:01
The JSbin is brilliant! This site is genius. =) – user6996 Jul 20 '14 at 21:06

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Try this:

Give your input an ID:

<input type="text" name="txtRadius" id="txtRadius" size="10" />

Use something like this to check if the value is less than or equal to 0:

var num = document.getElementById('txtRadius').value;
var radius = parseInt(num);

if (radius > 0){
    alert('number is not less than 0');
else {
    alert('number is less than 0');
}

Note: document.write is a bad habit. Instead, you can use someElement.innerHTML.

Refer to this for more info why it is a bad habit.

edited May 23 '17 at 12:13

Community

1
1

answered Jul 20 '14 at 20:47

imbondbaby

6,063
3
17
51

Updated answer for you! – imbondbaby Jul 20 '14 at 20:57

score -1 · Answer 3 · answered Jul 20 '14 at 20:48

-1

If you wish to do it with JavaScript:

function isInteger(x) {
    return (Math.round(x) === x);
}

function CalculateArea(){
    var radius = document.form1.txtRadius.value;
    if(isInteger(radius) && radius > 0) {
        document.write("<P>The area of the circle is " + (radius * radius * Math.PI) + "
    } else {
        whatever you want to do if it's no integer or zero
        ...
    }
}

answered Jul 20 '14 at 20:48

SVSchmidt

5,336
2
17
33

Fails. `inInteger` is being passed a string (`.value`), `Math.round` returns a number, and `number === string` cannot be true. – Niet the Dark Absol Jul 20 '14 at 20:49

Validate number in Javascript

3 Answers3

Old solution :