if function in javascript returns nothing..why?

Question

<p id="demo"></p>
<p id="demo2"></p>
<script>
function myFunction(x, y) {
    var mess2;
    var x = document.getElementById("id1").value;
    var y = document.getElementById("id2").value;
    var z = Math.abs(+ x) + Math.abs(+ y);
        if (var z <= 2.50) {
            mess2 = "message 1";
        } else if (2.50 < var z <= 4.00) {
            mess2 = "message 2";
        } else if (4.00 < var z <= 5.00) {
            mess2 = "message 3";
        } else {
            mess2 = "message 4";
        }
    document.getElementById("demo").innerHTML = + mess2;
    }
</script>

so this is my little function that I need to use to show some message depending on the inputed value that the user will write in an input window. the code worked fine when I outputed only the variable z as number, but when I added this if function it outputs nothing

Any advice? thank you :)

`var z` inside an expression is a syntax error. And there's no chained comparison in JavaScript. — Bergi, Aug 30 '16 at 07:17

Wizard · Accepted Answer · 2016-08-30T07:41:31.467

4

function myFunction() { // no arguments here, x and y are calculated inside function
    var mess2;
    var x = document.getElementById("id1").value;
    var y = document.getElementById("id2").value;
    var z = Math.abs(x) + Math.abs(y); // Calculate z based on x and y
    if (z <= 2.50) {          // is z <= 2.50 ?
        mess2 = "message 1";
    } else if (z <= 4.00) {   // is z <= 4.00 ? (we know it's z > 2.50)
        mess2 = "message 2";
    } else if (z <= 5.00) {   // is z <= 5.00 ? (we know it's z > 4.00)
        mess2 = "message 3";
    } else {
        mess2 = "message 4";  // is z > 5.00?
    }
    document.getElementById("demo").innerHTML = mess2; // Change html of "demo" to the message
}

See this JSFiddle

edited Aug 30 '16 at 07:41

answered Aug 30 '16 at 07:16

Wizard

2,961
2
13
22

An explanation of the changes would be nice. – Bergi Aug 30 '16 at 07:36
I added some comments in my answer. Variable z must be declared only once, you can't redeclare it inside "if". Let me know if you need anything else :-) – Wizard Aug 30 '16 at 07:42
@Matej Marić: if you like my solution, please kindly accept it as answer by clicking the checkmark :-) – Wizard Aug 30 '16 at 07:46

score 1 · Answer 2 · answered Aug 30 '16 at 07:16

Change:

document.getElementById("demo").innerHTML = + mess2;

to:

document.getElementById("demo").innerHTML += mess2;

and also you do not need to use 'var' keyword all the time, it is for declaration only.

Check this fiddle: https://jsfiddle.net/8cLegxbj/

score 1 · Answer 3 · answered Aug 30 '16 at 07:17

1

This is because you declare variable z in if statement. Declare it once after if statements and all will ok

answered Aug 30 '16 at 07:17

Gor

2,808
6
25
46

Ritesh Kashyap · Answer 4 · 2016-08-30T08:00:30.730

Check this:

You are accessing value of x and y through some input IDs(as per my understanding on your code) so no need to pass as function arguments.
no need to declare var in if condition as you have already declared it above.
if(4 < z <=5) will always return true irrespective of z value, so you should use logical operators instead.
Added a button to call you myFunction().

CODEPEN

function myFunction() {
  var mess2;
  var x = document.getElementById("id1").value;
  var y = document.getElementById("id2").value;

  var z = Math.abs(+x) + Math.abs(+y);
  if (z <= 2.50) {
    mess2 = "message 1";
  } else if (2.50 < z && z <= 4.00) {
    mess2 = "message 2";
  } else if (4.00 < z && z <= 5.00) {
    mess2 = "message 3";
  } else {
    mess2 = "message 4";
  }

  document.getElementById("demo").innerHTML = mess2;
}

score -1 · Answer 5 · answered Aug 30 '16 at 07:29

-1

I have made some changes,, check sample here - https://jsfiddle.net/ugoxr5m8/2/

<p id="demo">

</p>

function myFunction(x, y) {
  var mess2;
  //var x = document.getElementById("id1").value;
  //var y = document.getElementById("id2").value;
  var z = Math.abs(+x) + Math.abs(+y);

  if (z <= 2.50) {
    mess2 = "message 1";
  } else if (2.50 < z <= 4.00) {
    mess2 = "message 2";
  } else if (4.00 < z <= 5.00) {
    mess2 = "message 3";
  } else {
    mess2 = "message 4";
  }

  document.getElementById("demo").innerHTML = mess2;
}

myFunction(1, 2);

answered Aug 30 '16 at 07:29

Prakash

123
15

Which changes? Why are they important? – Bergi Aug 30 '16 at 07:35
This code does not work as expected for any values larger than 4. – Bergi Aug 30 '16 at 07:35

if function in javascript returns nothing..why?

5 Answers5