function if statement value ranges returning undefined & data evaluation

Question

I'm trying to get an input from a user and display a score after a button is pushed to a defined area of the page depending on the value they enter.

I'm not sure if IF statements are the most efficient way to do this but I thought I would start here.

I've created a simple page with a text input field and a button.

What i'd like is for users to input any number into the field and upon hitting the button, have their score displayed.

I'm using two functions to accomplish this.

function 1: 'calculate()' will eventually take several numbers and perform a further calculation and display a score. For now, I am attempting to assign the result of the function 'followerScore()' to the variable 'score' and display the value of 'score'.

function calculate() {

  var score = followerScore();

  document.getElementById('result').innerHTML = "Your score is : " + score;
}

function 2: the code for 'followerScore()'

    function followerScore() {

    var followerScore = 0;
    var followers = document.getElementById('followers').value;

    if (followers <= 25, 000){
          followerScore = 1;
          alert(followerScore);
    } else if (25000 < followers <= 44000){
            followerScore = 2;
    } else if (44000 < followers <= 60000){
         followerScore = 3;
    } else if (60000 < followers <= 75000){
        followerScore = 4;
    } else if (75000 < followers <= 100000){
        followerScore = 5;
    } else if (100000 < followers <= 140000){
        followerScore = 6;
    } else if (140000 < followers <= 180000){
        followerScore = 7;
    } else if (180000 < followers <= 225000){
        followerScore = 8;
    } else if (225000 < followers <= 300000){
        followerScore = 9;
    } else if (followers > 300000){
        followerScore = 10;
    } else followerScore = "did you pick a number?";
  }

I had hoped when inputting values 123 into my form that on click of the 'calculate' button I would get a score of 1 but instead I'm getting an error that says undefined.

html is as follows:

<body>

  <form>
    <input type="text" placeholder="Followers" id="followers">
  </form>

  <input type="submit" value="calculate" onclick="calculate();">

  <div>
    <p id='result'></p>


  </div>
</body>

My questions are as follows: 1. Have I incorrectly declared the variable 'followerScore' or why am I getting a result of undefined? 2. Is using IF ELSE statements the best way to evaluate and return the value or is there a way to use SWITCH statements to evaluate to return these scores or what is considered best practice? I feel as if this would be very cumbersome to do a set of IF ELSE if I were, for example, to break up the ranges more.

please have a look here: `if (followers <= 25, 000) ...` what result do you expect? small hint: [comma operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator). — Nina Scholz, Dec 10 '17 at 20:46
this is wrong `if (followers <= 25, 000)`, fix it to this one `if (followers <= 25)` — Colin Cline, Dec 10 '17 at 20:48
see my answer, you aren't returning anything from the function hence the undefined behaviour. — David Zorychta, Dec 10 '17 at 20:49
@macmee that seems to be the issue although now it's reporting the wrong range but i'll figure that out. — Panayiotis Spanos, Dec 10 '17 at 20:50
@ colin cline i'm not sure how that's wrong? I want the score 1 to be for followers less than or equal to 25,000 not 25. can you explain what you mean? — Panayiotis Spanos, Dec 10 '17 at 20:51
@PanayiotisSpanos comma in `if` statement will broke your code — Colin Cline, Dec 10 '17 at 21:11
the `(25000 < followers <= 44000)` conditions don't do what you think.. it's evaluated to `(false <= 44000)` or `(true <= 44000)` which is always true because false and true evaluate to 0 and 1. `(25000 < followers && followers <= 44000)` would be the correct version, but in your case just `else if (followers <= 44000)` is enough, because followers <= 25000 is handled in the previous case — Slai, Dec 10 '17 at 21:34
I've figured this out now and am doing this instead but the Macmee has answered the actual questions posed. i'm using (followers > 25000 && followers <=44000) but thank you, you are correct. — Panayiotis Spanos, Dec 10 '17 at 21:37

David Zorychta · Accepted Answer · 2017-12-10T20:57:30.540

3

You need to return the followerScore variable from the followerScore() function. Right now it doesn't return anything. You should set the last line of followerScore() to return followerScore;

As for your question about switches I personally find your conditionals quite clear, and in terms of performance in javascript I believe the if statements are faster. Refer to these benchmarks here:

Switch statement for greater-than/less-than

edited Dec 10 '17 at 20:57

answered Dec 10 '17 at 20:47

David Zorychta

13,039
6
45
81

so this is helpful and fixes my first question. Did you have an opinion on my second question? – Panayiotis Spanos Dec 10 '17 at 20:52
1

@PanayiotisSpanos as this is stack overflow I believe you're required make a new post with your other question (to avoid cluttering threads with multiple questions packed in). So I suggest accepting the right answer here and making a new question to tackle your new issue and then I will be more than happy to take a look at that too :) – David Zorychta Dec 10 '17 at 20:53
1

@PanayiotisSpanos nonetheless I sent you a link to benchmarks on ifs vs switches, check my answer now. – David Zorychta Dec 10 '17 at 20:57

score 1 · Answer 2 · answered Dec 10 '17 at 20:55

You could move the values into an array and use Array#findIndex.

var values = [0, 25000, 44000, 60000, 75000, 100000, 140000, 180000, 225000, 300000, Infinity],
    followerScore = values.findIndex(v => followers <= v);

This requires a check if you got a number.

score 0 · Answer 3 · answered Dec 10 '17 at 21:09

1) Your followerScore() will return anything so you don't have access to scores at all.

2) if/else is good practice if you have condition to check, when you have numbers better use switch or use if/else in optimized way.

Code with switch:

function followerScore() {
    var followerScore = 0;
    var followers = document.getElementById('followers').value;

    switch(followers){
      case '> 300000':
          followerScore = 10;
          break;
      case '<= 300000':
          followerScore = 9;
          break;
      case '<= 225000':
          followerScore = 8;
          break;
      case '<= 180000':
          followerScore = 7;
          break;
      case '<= 140000':
          followerScore = 6;
          break;
      case '<= 100000':
          followerScore = 5;
          break;
      case '<= 75000':
          followerScore = 4;
          break;
      case '<= 60000':
          followerScore = 3;
          break;
      case '<= 44000':
          followerScore = 2;
          break;
      case '<= 25000':
          followerScore = 1;
          break;
      default:
          followerScore = "did you pick a number?";
    }

    return followerScore;
}

Code with optimized if/else:

function followerScore() {
    var followerScore = 0;
    var followers = document.getElementById('followers').value;

    if(followers > 300000){
        followerScore = 10;
    } else if(followers <= 300000){
        followerScore = 9;
    } else if(followers <= 225000){
        followerScore = 8;
    } else if(followers <= 180000){
        followerScore = 7;
    } else if(followers <= 140000){
        followerScore = 6;
    } else if(followers <= 100000){
        followerScore = 5;
    } else if(followers <= 75000){
        followerScore = 4;
    } else if(followers <= 60000){
        followerScore = 3;
    } else if(followers <= 44000){
        followerScore = 2;
    } else if(followers <= 25000){
        followerScore = 1;
    } else {
        followerScore = "did you pick a number?";
    }

    return followerScore;
}

function if statement value ranges returning undefined & data evaluation

3 Answers3