Beginner needs help (parseInt). JS/HTML

Question

I started to learn this coding thing over a week ago and I don't have much experience in it ( as you probably see).
I have no idea what I'm doing, therefore my code doesn't work, For some reason it prints only first 2 answers.
If you could just let me know how to use if...else statements while using parseInt(document.getElementById("speed").value), it would be great.
Thanks in advance.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Penalty</title>
</head>

<body>

    <form>
        <label>Fine:</label>
        <input type="text" id="speed" size="3">
        <input type="button" value="Submit" onclick="sSubmit()">
    </form>

    <p id="answer"></p>

    <script type="text/javascript">

        function sSubmit() {
            var speed = parseInt(document.getElementById("speed").value);

            var result;

            if (speed <= 60) {
                result = " No fine";
            }
            else if (speed >= 61 || speed <= 71) {
                result = "Fine is 100€";
            } else if (speed >= 72 || speed <= 75) {
                result = "Fine is 170€";
            } else if (speed >= 76 || speed <= 80) {
                result = "Fine is 200€";
            } else {
                result = "Day-fine ";
            }

            document.getElementById("answer").innerHTML = "<p>" + result + "</p>";
        }

    </script>
</body>

</html>

Please find a more expressive question title. – zabop Jan 22 '21 at 15:23 — zabop, Jan 22 '21 at 15:23
https://stackoverflow.com/help/how-to-ask – zabop Jan 22 '21 at 15:23 — zabop, Jan 22 '21 at 15:23

Jacob Lockard · Answer 1 · 2021-01-22T15:33:15.350

You probably should be using && (which means and), not || (which means or).

With your current code, one of the first two options are always going to be run because if the speed is greater than 60 (and thus makes it to the first else if), then it is always going to be either greater than 60 or less than 72. You want it to be greater than 60 and less than 72.

An updated example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Penalty</title>
</head>
<body>

    <form>
        <label>Fine:</label> 
        <input type="text" id="speed" size="3"> 
        <input type="button" value="Submit" onclick="sSubmit()">
    </form>
    
    <p id="answer"></p>

    <script type="text/javascript">
          
   function sSubmit () {
       var speed = parseInt(document.getElementById("speed").value);
  
       var result;    
       
       if (speed <= 60){
      result = " No fine" ;
           }
            else if (speed >= 61 && speed <=71 ) {
                 result = "Fine is 100€" ;
                
                } else if (speed >= 72 && speed <=75 ) {
                 result = "Fine is 170€" ;
                    
                    } else if (speed >= 76 && speed <=80 ) {
                        result = "Fine is 200€" ;
        
                } else {
                    result = "Day-fine "; 
                    
            }
   
        document.getElementById("answer").innerHTML= "<p>" + result + "</p>";    
    } 
        
    </script>
</body>
</html>

Also, as a side note, you really shouldn't need the && at all. Since you're working with else if statements, you can simply use <= by itself. In the speed >= 61 && speed <= 71 branch, for example, we know that the speed cannot be less than or equal to 60. If it were, then the previous if body would have been executed, and the else if statement would never have been evaluated. Thus the following JavaScript should suffice:

   function sSubmit () {
       var speed = parseInt(document.getElementById("speed").value);
  
       var result;    
       
       if (speed <= 60){
      result = " No fine" ;
           }
            else if (speed <=71 ) {
                 result = "Fine is 100€" ;
                
                } else if (speed <=75 ) {
                 result = "Fine is 170€" ;
                    
                    } else if (speed <=80 ) {
                        result = "Fine is 200€" ;
        
                } else {
                    result = "Day-fine "; 
                    
            }
   
        document.getElementById("answer").innerHTML= "<p>" + result + "</p>";    
    }

Harsh Gundecha · Answer 2 · 2021-01-22T15:21:16.823

you dont need to add >= in subsequent else ifs since it reaches there only when the above condition is false
even if you somehow needed to add that it should have been connected with && or else for all the value >=61 will be trapped inside 2nd else if and thus would never reach the blocks below it

i think following is what you are trying to achieve

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Penalty</title>
</head>

<body>
    <form>
        <label>Fine:</label>
        <input type="text" id="speed" size="3">
        <input type="button" value="Submit" onclick="sSubmit()">
    </form>
    <p id="answer"></p>
    <script type="text/javascript">

        function sSubmit() {
            var speed = parseInt(document.getElementById("speed").value);

            var result;

            if (speed <= 60) {
                result = " No fine";
            } else if (speed <= 71) {
                result = "Fine is 100€";
            } else if (speed <= 75) {
                result = "Fine is 170€";
            } else if (speed <= 80) {
                result = "Fine is 200€";
            } else {
                result = "Day-fine ";
            }

            document.getElementById("answer").innerHTML = "<p>" + result + "</p>";
        }

    </script>
</body>

</html>

Beginner needs help (parseInt). JS/HTML

2 Answers2