CODEWITHSUNDEEP
javascripthtml
archeryninja
archeryninja

Reputation: 57

If...Else If Statements for Comparing Numbers for 2 Different Conditions

I am having trouble verifying two conditions for my JavaScript. When I put in a number, The first if statement will work. However, the else if statement will not print out anything following that criteria. Some help would be appreciated. 

<html>
<head>

<script>
function return() {
  var num1 = document.getElementById("num1");
  var num2 = document.getElementById("num2");
  var x = num1.value;
  var y = num2.value
  if (isNaN(x)) {
    alert("Please only enter numbers");
    return false;
  }
  if (isNaN(y)) {
    alert("Please only enter numbers");
    return false;
  }
  var calculation = (x + y) / (x * y);
  var result = document.getElementById("answer");
  if (calculation > 1) {
    result.value = "Your number is more than 1";
  } else {
    if (calculation <= 0.5) {
      result.value = "Your number is 1 or less";
    }
  }
}
  </script>
  </head>

  <body>
   1: <input type="text" id="num1"/>
   2: <input type="text" id="num2"/>
  <input type="button" value="Calculate" onclick= "return()"/>
  <input type="text" id="answer"/>
</body>
</html>

Upvotes: 2

Views: 1482

Answers (6)

Rayon
Rayon

Reputation: 36609

You can not use reserved words as function names, variable names or labels.

Also cast input value as Number, Unary plus could be used.

InputElement.value return Value of type String hence if values are 2 and 3, calculation will be ("2" + "3" ==> "23"), values will be concatenated, not added!

Also note that you have a missing condition which is not handled, you should have else condition as well.

function calculate() {
  var num1 = document.getElementById("num1");
  var num2 = document.getElementById("num2");
  var x = num1.value;
  var y = num2.value
  if (isNaN(x)) {
    alert("Please only enter numbers");
    return false;
  }
  if (isNaN(y)) {
    alert("Please only enter numbers");
    return false;
  }
  var calculation = (+x + +y) / (x * y);
  var result = document.getElementById("answer");
  if (calculation > 1) {
    result.value = "Your number is more than 1";
  } else {
    if (calculation <= 0.50) {
      result.value = "Your number is 1 or less";
    } else {
      result.value = "Unhandled condition!";
    }
  }
}
1: <input type="text" id="num1" /> 2: <input type="text" id="num2" />
<input type="button" value="Calculate" onclick="calculate()" />
<input type="text" id="answer" />

Upvotes: 3

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

You can't use function name return. return is javascript keyword.

Try to something like this.

function myFunction(){
	 var num1 = document.getElementById("num1");
		  var num2 = document.getElementById("num2");
		  var x = num1.value;
		  var y = num2.value;
		  
		  if (isNaN(x)){
		  	alert("Please only enter numbers");
		  	return false;
		  }
		  if (isNaN(y)){
		  	alert("Please only enter numbers");
		  	return false;
		  }
		  var calculation = (x+y)/(x*y);
		  var result = document.getElementById("answer");
		  if (calculation > 1) {
		  	result.value = "Your number is more than 1";
		  } else {
		  	if (calculation <= 0.50) {
		    	result.value = "Your number is 1 or less";
		  	}
		  }
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1: <input type="text" id="num1"/>
2: <input type="text" id="num2"/>
<input type="button" value="Calculate" onclick= "myFunction()"/>
<input type="text" id="answer"/>

Upvotes: 0

Ude Ifendu
Ude Ifendu

Reputation: 31

I guess the figures are being rounded up, showing both 1 and 0.5 as 1. If you must use the else, try a math function that would restrict the estimations.

Upvotes: 0

Garrett Kadillak
Garrett Kadillak

Reputation: 1074

The problem is that you're returning which forces the function to exit, never giving the second if block a chance to run. Also, return is a reserved keyword in JavaScript and not advised to be a function name. Link to jsbin.

Here's some code that would work:

  1:<input type="text" id="num1" /> <br />
    2:<input type="text" id="num2" /> <br />
  <input type="button" value="Calculate" onclick="sumUpper()" />
  <input type="text" id="answer" />

 function sumUpper() {
   var num1 = document.getElementById("num1");
   var num2 = document.getElementById("num2");
   var x = parseFloat(num1.value);
     var y = parseFloat(num2.value);
     var xError = false;
     var yError = false;

   if (isNaN(x)) {
     console.log("Please only enter numbers x");
     xError = true;
   }
   if (isNaN(y)) {
     console.log("Please only enter numbers y");
     var yError = true;
   }
     console.log(xError, yError);
   var calculation = (x + y) / (x * y);
   var result = document.getElementById("answer");
   if (calculation > 1) {
     result.value = "Your number is more than 1";
   } else {
     if (calculation <= 0.50) {
       result.value = "Your number is 1 or less";
     }
   }
 }

Upvotes: 0

Ali Ezzat Odeh
Ali Ezzat Odeh

Reputation: 2163

The else statement is wrong try removing if (calculation <= 0.50) like this:

    else {   
    result.value = "Your number is 1 or less";       
    }

Upvotes: 0

Frank Wisniewski
Frank Wisniewski

Reputation: 1224

return is statement, don´t use this as a functionname.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        1: <input type="text" id="num1"/>
       2: <input type="text" id="num2"/>
      <input type="button" value="Calculate" onclick= "returnq()"/>
      <input type="text" id="answer"/>
    <script>

    function returnq(){
      var num1 = document.getElementById("num1");
      var num2 = document.getElementById("num2");
      var x = num1.value;
      var y = num2.value
      if (isNaN(x)){
      alert("Please only enter numbers");
      return false;
      }
      if (isNaN(y)){
      alert("Please only enter numbers");
      return false;
      }
      var calculation = (x+y)/(x*y);
      var result = document.getElementById("answer");
      if (calculation > 1) {
      result.value = "Your number is more than 1";
      }
      else {
      if (calculation <= 0.50) {
        result.value = "Your number is 1 or less";
       }
      }
     }


    </script>
    </body>
    </html>

is ok...

sorry two answers at the same time

Upvotes: 0

Related Questions