How to call a function containing If/Else using User Input in JavaScript

Question

How do I go about nesting an If/Else statement into a function and then calling that function using a user input in the body in order to make the function calculate the correct alert with JavaScript? I'm missing the knowledge of how to call the statement in the body it seems. Any help would be appreciated! :)

<!doctype html>
<html>
<head>
    <title> JavaScript Playground </title>
    <script type="text/javascript">
        function grade(Grade){
            if (Grade <= 90 && Grade >= 100) {
                return alert("You made an A!");
            } else {
                return alert("I don't know what you made!");
            }
        }
    </script>   
</head>
    <body>
        <script>
        var Grade = parseFloat(prompt("Please enter a number: "));</script>
    </body>
</html>

Just put the line grade(Grade); after the var Grade = ... line? You call a function by writing its name follwed by putting (...). Between the parenthesis go the arguments. developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — Felix Kling
– Felix Kling, Commented Sep 21, 2020 at 12:56
Wow thanks man! I feel like an idiot. I appreciate the help and the link to the guide you sent me! I'm a new student to software development and I didn't know that there was an entire document for learning JavaScript. I appreciate it so much! — MrPerserva
– MrPerserva, Commented Sep 21, 2020 at 13:10
There are a couple of great resources for learning JavaScript out there: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide, eloquentjavascript.net, exploringjs.com/impatient-js/index.html — Felix Kling
– Felix Kling, Commented Sep 21, 2020 at 13:15

mplungjan · Accepted Answer · 2020-09-21 13:21:02Z

2

Several things

Your value cannot be <=90 AND >= 100
No need to return the alert
You need to call the prompt before the grade or move the prompt to the function
Prompt can return empty string, or something not a number so test if it is a number

Your code could be written

function grade(){
  var Grade = prompt("Please enter a number: "); 
  Grade = isNaN(Grade) || Grade.trim()==="" ? 0 : +Grade; // force number if "Not a Number" or an empty string
  if (Grade >= 90 && Grade <= 100) {
    alert("You made an A!");
  } else {
     alert("I don't know what you made!");
  }
}
grade()

That said,

You should already use eventListeners
It is nicer to use some element's text content than an alert
I also show you a ternary instead of the if (a) text = "a"; else if (b) text = "b" construct

<!doctype html>
<html>

<head>
  <title> JavaScript Playground </title>
  <script type="text/javascript">
    // helper function to make a number from whatever is entered
    const makeNum = str => isNaN(str) || str.trim() === "" ? 0 : +str; // convert to 0 if not a number
    
    function grade(Grade) {
      Grade = makeNum(Grade); // convert to number
      return Grade >= 90 && Grade <= 100 ? "You made an A!" : "I don't know what you made!";
    }
    window.addEventListener("load",function() { // on page load
      document.getElementById("gradeMe").addEventListener("click",function() {
        document.getElementById("res").textContent = grade(document.getElementById('grade').value);
      })
    });
  </script>
</head>

<body>
  Please enter a number:
  <input type="text" id="grade">
  <input type="button" id="gradeMe" value="grade me" />
  <span id="res"></span>
</body>

</html>

edited Sep 21, 2020 at 13:21

answered Sep 21, 2020 at 13:09

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ATD Over a year ago

You could also add the prompt() returns one of three things: (1) a string, (2) an empty string if the user enters nothing and just clicks OK or (3) null, if the user clicks Cancel. Any string returned may or may not be a number. Thus, the code will need to check for non-numeric responses, empty strings or nulls as well.

MrPerserva Over a year ago

We haven't learned event listeners or even went over them in the class as of yet. We are doing 2 pages, one for if/else and one for Switch Statements. I need to look up event listeners and see how they are used. I appreciate the feed back! I'll go search them up now! :) Also, I love the way you rewrote it, it looks much smoother and runs better also!

mplungjan Over a year ago

@MrPerserva I just wanted to give you some better codes. The first example I gave is ok for now - I did add some input validation for you

Dan Fletcher · Accepted Answer · 2020-09-21 13:07:42Z

0

The line directly after

var Grade = parseFloat(prompt("Please enter a number: "));

You can call your function like grade(Grade);

The if/else is completely unrelated to how you call the function but I think the conditional inside your if statement is mixed up. I'm guessing you probably meant for it to be Grade >= 90 && Grade <= 100 rather than Grade <= 90 && Grade >= 100.

answered Sep 21, 2020 at 13:07

Dan Fletcher

1,2481 gold badge13 silver badges29 bronze badges

1 Comment

MrPerserva Over a year ago

Yeah! The <= was a mishap and completely accidental. I appreciate the step-by-step on how to think of the if/else as unrelated to the call. I really appreciate the help!

Collectives™ on Stack Overflow

How to call a function containing If/Else using User Input in JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related