CODEWITHSUNDEEP
javascriptweb
StackUser2014
StackUser2014

Reputation: 51

Display a message if variables enter differ

I Have a webpage with 2 textboxs on it a button and a paragraph. what i want to happen is if a user types a number into textbox1 and then another number into textbox2 and presses the button called calculate. it to bring up a statement saying if the number is lower, higher or equal to the number in textbox1. this is what i have but it isnt working. it keeps returning same.

<input type="text" id="textbox1" value="Enter a number" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate(){
 var x="";
 if (textbox1>textbox2){
  x="more than";
  }
 else if (textbox1=textbox2){
  x="Same";
  }
 else{
  x="Lower";
  }
 document.getElementById("demo").innerHTML=x;
 }
</script>

Does anyone know why? Thank you

Upvotes: 0

Views: 108

Answers (5)

Brad Christie
Brad Christie

Reputation: 101604

They're strings, so you need them as numbers:

// retrieve the textboxes (inputs)
var tb1 = document.getElementById('textbox1'),
    tb2 = document.getElementById('textbox2');

// save the values as numeric
var tb1v = new Number(tb1.value),
    tb2v = new Number(tb2.value);

// eventual result
var x = '';

// Are they numbers? When you use `new Number` and the value isn't
// numeric, you can check the value using isNaN (is Not-a-Number)
if (isNaN(tb1v) || isNaN(tb2v)){
  x = 'Invalid number(s)';
} else{
  // now compare
  if (tb1v > tb2v){
    x = 'more than';
  } else if (tb2v > tb1v) {
    x = 'Lower';
  } else {
    x = 'Same';
  }
}

// output it to screen
document.getElementById('demo').innerHTML = x;

Working example

Upvotes: 0

dkasipovic
dkasipovic

Reputation: 6120

You should edit your code like this:

<input type="text" id="textbox1" value="Enter a number" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate()
{
var textbox1 = parseFloat(document.getElementById('textbox1').value);
var textbox2 = parseFloat(document.getElementById('textbox2').value);
var x="";
if (textbox1>textbox2)
  {
  x="more than";
  }
else if (textbox1==textbox2)
  {
  x="Same";
  }
else
  {
  x="Lower";
  }
 document.getElementById("demo").innerHTML=x;
}
</script>

In your original script, textbox1 and textbox2 are undefined (function does not know what they are).

Upvotes: 3

Dean Meehan
Dean Meehan

Reputation: 2646

You are forgetting about the .value, at the moment you are getting the actual DOM Objects, but their values. So simply amend

if (textbox1>textbox2)

to 

if (textbox1.value>textbox2.value)

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

Use this:

function calculate() {
    var x = "";
    if (Number(textbox1.value) > Number(textbox2.value)) {
        x = "more than";
    } else if (Number(textbox1.value) == Number(textbox2.value)) {
        x = "Same";
    } else {
        x = "Lower";
    }
    document.getElementById("demo").innerHTML = x;
}

Demo:http://jsfiddle.net/KDLvJ/1

Upvotes: 1

j08691
j08691

Reputation: 207901

You're performing an assignment here (=):

else if (textbox1=textbox2)

it should be a comparison (==):

else if (textbox1==textbox2)

And it should be textbox1.value and textbox1.value

jsFiddle example

Upvotes: 0

Related Questions