Using Javascript to compare two input numbers in HTML?

Question

I am using Notepad++ to create a simple web page where a user types in two numbers into a text box, and then presses a button. When they press the button something comes up that tells them whether the first or second number is greater. I have the following code but cant get anything to come up. Does anyone know whats wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Assignment 10 Form</title>

    <script type="text/javascript">

        function greaterNum(){
        var value1;
        var value2;
        value1 = document.First_num.value;
        value2 = document.last_num.value;
        if (value1 > value2){
        alert('Value 1 is greater than value 2');
        document.body.style.background = "orange";
        }

    }


</script> 


<style type="text/css">
  body{background-color: #40FF00;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    }

#container{
    border: 2px solid yellow;
    padding: 20px;
    }

</style>

</head>

<body>
<h1>Assignment 10</h1>

<div id="container">
    <div class="Num">
    <form>
<label class="label1">Enter Value 1:</label>
<input type="text" name="First_num" value=" " />
<label class="label1">Enter Value 2:</label>
<input type="text" name="last_num" value=" " />
<br/>
<input type="button" value=" Which number is greater? " onclick="greaterNum();" />
</form>

</body>
</html>

elclanrs · Accepted Answer · 2013-04-09 23:47:46Z

5

Values from inputs are retrieved as strings, you need to convert it to number. Try this:

value1 = +document.First_num.value;
value2 = +document.last_num.value;

Also, try to be consistent when naming your input, why caps for one and lowercase for the other?

answered Apr 9, 2013 at 23:47

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

master ArSuKa Over a year ago

@dewyze FYI, the ' .value' at the last is what completes the trick !

KingKongFrog · Accepted Answer · 2013-04-10 02:29:54Z

0

Convert to floats.

value1 = parseFloat(document.First_num.value);
value2 = parseFloat(document.last_num.value);

answered Apr 10, 2013 at 2:29

KingKongFrog

14.5k22 gold badges78 silver badges134 bronze badges

Comments

ameed · Accepted Answer · 2013-04-09 23:50:45Z

-1

You may need to use:

value1 = document.getElementById("First_num").value;

However, this only works if you assign the elements id attributes:

<input type="text" id="First_num" name="First_num" value=" " />

Otherwise, use the getElementsByName.

Hope this helps!!

answered Apr 9, 2013 at 23:50

ameed

1,1706 silver badges26 bronze badges

Comments

dewyze · Accepted Answer · 2013-04-10 02:27:07Z

-1

Html is a string, not a value. You need to parse it in someway.

EDIT:

The problem seems to be grabbing the values, change it to getElementById and it works fine:

http://jsfiddle.net/fHtZU/10/

HTML

<h1>Assignment 10</h1>

<div id="container">
    <div class="Num">
    <form>
<label class="label1">Enter Value 1:</label>
<input type="text" id="First_num" name="First_num" />
<label class="label1">Enter Value 2:</label>
<input type="text" id="last_num" name="last_num" />
<br/>
<input type="button" id="clickme" value="Which number is greater?" onclick="greaterNum()" />
</form>

js

function greaterNum(){
    var value1;
    var value2;
    value1 = document.getElementById("First_num").value;
    value2 = document.getElementById("last_num").value;
    if (value1 > value2){
        alert(value1 - value2);
        document.body.style.background = "orange";
    }

}

edited Apr 10, 2013 at 2:27

answered Apr 9, 2013 at 23:48

dewyze

9791 gold badge8 silver badges21 bronze badges

4 Comments

ameed Over a year ago

How do we parse this HTML?

ameed Over a year ago

I don't mean to be a downer, but in the future, please at least post the raw code for something and test on the local machine if possible. Thanks for the update!! :-)

dewyze Over a year ago

Oh, you're totally right. There aren't always a lot of questions I really know how to answer, I got excited.

Francisco Goldenstein Over a year ago

I would add that you need to check if the values entered by the user are numbers. You can use isNan function for that. You can do it using the function isNaN. if (isNaN(value1) || isNan(value2)) { alert('Enter numbers'); }

Collectives™ on Stack Overflow

Using Javascript to compare two input numbers in HTML?

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related