CODEWITHSUNDEEP
javascripthtml
Panayiotis Spanos
Panayiotis Spanos

Reputation: 155

function if statement value ranges returning undefined & data evaluation

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.

Upvotes: 0

Views: 53

Answers (3)

Colin Cline
Colin Cline

Reputation: 1279

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;
}

Upvotes: 0

Leah Zorychta
Leah Zorychta

Reputation: 13439

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

Upvotes: 3

Nina Scholz
Nina Scholz

Reputation: 386680

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.

Upvotes: 1

Related Questions