Javascript conditional statements with range input values

Question

could someone help me with the following Javascript code. I want the conditional statements to execute if the value of "score" is between the ranges of 1-3, 3-5, 5-7, 7-9 and 9-10.

Currently, they only execute if the variable "score" is an integer, but I want the scores to be executed between the range of numbers.

for example, I want the line "if ((score==1) || (score==2) || (score==3))" to be something like if( score is between 1 and 3), Then the statement will be executed.

This is the HTML:

Input 1 <input type="number" id="num1">
    <br>
    <br>
    Input 2 <input type="number" id="num2">
    <br>
    <br>
    Input 3 <input type="number" id="num3">
    <br>
    <br>
    Input 4 <input type="number" id="num4">
    <br>
    <br>
    Input 5 <input type="number" id="num5">
    <br>
    <br>
    <button onclick="calculate()">Calculate</button>

<h1 id="answer"></h1>
<h1 id="advice"></h1>

This is the JS:

            function calculate()
        {
         var field1=document.getElementById("num1").value;
         var field2=document.getElementById("num2").value;
         var field3=document.getElementById("num3").value;
         var field4=document.getElementById("num4").value;
         var field5=document.getElementById("num5").value;

         if ( (field1>10) || (field1<1)|| (field2>10) || (field2<1) || (field3>10) || (field3<1) || (field4>10) || (field4<1) || (field5>10) || (field5<1))

         {
            alert("Enter a number between 1 and 10");
            return false;
        }

         var result=parseFloat(field1)+parseFloat(field2)+parseFloat(field3)+parseFloat(field4)+parseFloat(field5);

         var score= result / 5;




            if ((score==1) || (score==2) || (score==3))

         {

            document.getElementById("advice").innerHTML="You are between 1 and 3";

            }

            if ((score==4) || (score==5))

         {

            document.getElementById("advice").innerHTML="You are between 4 and 5";

            }

            if ((score==6) || (score==7))

         {

            document.getElementById("advice").innerHTML="You are between 6 and 7";

            }

            if ((score==8) || (score==9))

         {

            document.getElementById("advice").innerHTML="You are between 8 and 9";

            }

            if ((score==10))

         {

            document.getElementById("advice").innerHTML="You are 10";

            }

         if(!isNaN(score))

            {

            document.getElementById("answer").innerHTML="Your career score is " + score;

            }


        }

Help will be super appreciated!

`if (score => 1 && score < 3) { //do something }` – looks like what you want. — Vadim, Dec 17 '18 at 10:57
Use a [`switch` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch), but are you sure `var score= result / 5` is correct? — Tigger, Dec 17 '18 at 10:58
https://stackoverflow.com/questions/5619832/switch-on-ranges-of-integers-in-javascript — Dave Anders, Dec 17 '18 at 10:59
Possible duplicate of [Switch on ranges of integers in JavaScript](https://stackoverflow.com/questions/5619832/switch-on-ranges-of-integers-in-javascript) — Tigger, Dec 17 '18 at 11:00
please add the correct range, if the first or the last value is inclusive or not. — Nina Scholz, Dec 17 '18 at 11:07
Thanks for the help but now it only displays the last statement "you are 10" — Sylviana, Dec 17 '18 at 11:08

Vadim · Accepted Answer · 2018-12-17T11:24:54.353

0

if (score >= 1 && score < 3) {
  // do something
} else if (score >= 3 && score < 5) {
  // do something
}
 ... and so on

edited Dec 17 '18 at 11:24

answered Dec 17 '18 at 11:00

Vadim

515
1
4
9

score 0 · Answer 2 · answered Dec 17 '18 at 11:12

0

Also I would like to help you write better code:

This:

if ( (field1>10) || (field1<1)|| (field2>10) || (field2<1) || (field3>10) || (field3<1) || (field4>10) || (field4<1) || (field5>10) || (field5<1))
    {
        alert("Enter a number between 1 and 10");
        return false;
    }

And more cleaner code:

const fault = [field1, field2, field3, field4, field5].find(el => {
   if (el < 1 || el > 10) { // if we find this, then fault will be the index of this element
     return true 
   }  else { return false } // else fault will be undefined
})

if (fault) {
  alert("Enter a number between 1 and 10")
  return false
}

answered Dec 17 '18 at 11:12

Vadim

515
1
4
9

Thanks once again but on updating the code.. it now only executes the "you are between 1 and 3" statement regardless of what values I enter – Sylviana Dec 17 '18 at 11:17
Great thanks for all your help especially Vadim. All I had to do was change the first operator from => to >=. Hope you all have a great day! – Sylviana Dec 17 '18 at 11:22
Yeah, typos happen!) – Vadim Dec 17 '18 at 11:24

Javascript conditional statements with range input values

2 Answers2