When click the grade button If the avg > 30 display “Congrats! passed” and if the avg < 30 display "Better luck"

user_11268126 0
Viewed 49

I need this JS program to get 5 marks from the user using prompt box and calculate the total and average of those marks and display the output. When a user clicks on the grade button the following should execute. """If the average is greater than 30 display an alert box “Congrats! You passed” and if the average is below 30 display an alert box “Better luck next time” """

// JavaScript Document
function sum(){
    var mark1,mark2,mark3,mark4,mark5;
    
    mark1=window.prompt("Enter Mark 1");
    mark2=window.prompt("Enter Mark 2");
    mark3=window.prompt("Enter Mark 3");
    mark4=window.prompt("Enter Mark 4");
    mark5=window.prompt("Enter Mark 5");
    
    var tot=parseInt(mark1)+parseInt(mark2)+parseInt(mark3)+parseInt(mark4)+parseInt(mark5);
    var avg=(tot/5);
    
    document.getElementById("total").innerHTML = "Total: " + tot;
    document.getElementById("average").innerHTML = "Average: " + avg;
}
function grade(){
    if (avg>30){
        window.alert("Congrats, You Passed!");
    }
    if (avg<30){
        window.alert("Better luck next time...")
    }
}
button {
    height: 100px;
    width: 200px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Q2</title>
    <link href="styles.css" type="text/css">
    <script src="script.js" type="text/javascript"></script>
</head>

<body onLoad="sum()">
    <p id="total"></p>
    <p id="average"></p>
    <button onClick="grade()">Grade</button>
</body>
</html>

css html jquery javascript
1 Answers

As people already told you in comments, the current problem of your code lies under the variable scope and lexical scope. So once you declare a variable within a function even with ES5- syntax (var keyword) the value of that variable will only be available on that function scope and you can't reach it outside it. So in your particular case declaring your avg variable in the global scope will solve your problem.

So the final code will be like this:

// JavaScript Document
var avg;

function sum() {
  var mark1, mark2, mark3, mark4, mark5;

  mark1 = window.prompt("Enter Mark 1");
  mark2 = window.prompt("Enter Mark 2");
  mark3 = window.prompt("Enter Mark 3");
  mark4 = window.prompt("Enter Mark 4");
  mark5 = window.prompt("Enter Mark 5");

  var tot = parseInt(mark1) + parseInt(mark2) + parseInt(mark3) + parseInt(mark4) + parseInt(mark5);
  avg = (tot / 5);

  document.getElementById("total").innerHTML = "Total: " + tot;
  document.getElementById("average").innerHTML = "Average: " + avg;
}

function grade() {
  if (avg > 30) {
    window.alert("Congrats, You Passed!");
  }
  if (avg < 30) {
    window.alert("Better luck next time...")
  }
}
button {
  height: 100px;
  width: 200px;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Q2</title>
  <link href="styles.css" type="text/css">
  <script src="script.js" type="text/javascript"></script>
</head>

<body onLoad="sum()">
  <p id="total"></p>
  <p id="average"></p>
  <button onClick="grade()">Grade</button>
</body>

</html>

user_119085020
Related