I need help adding a button to run a function in my JavaScript-CodePudding

I need help with my JavaScript, when the user clicks the button i want to prompt the user to enter a score (0-100) then return a grade based on that score (e.g- 100-80=A, 79-60=B ... <30=F) By the way please explain how and why each step is done because i'm quite dumb, thanks.

<!DOCTYPE html>
<html>

<head>

<title>Marks to Grade Conversion</title>

<style>
h1 {font-family:serif; font-size:36px; color:#ff0000; text-align:center}
h2 {font-family:sans-serif; font-size:24px; color:#000000; text-align:center}
body {background-color:#FFCC00}
</style>

</head>

<body>
    
    <h2>Faculty of Computer science</h2><br>
    <h1>End of year module test results Mark to Grade utility</h1><br><br>
    <h2>Click the button to enter the Mark and display the Grade</h2><br>
  
  <h2><button style="font-size:24px; height:50px; width:300px"; onClick="ConvertMark()"> Click to enter the mark </button></h2><br>
  
<h1 id="display grade here"></h1></b></td>

CodePudding user response：

pretty basic. write your function, get input, convert, display result

function ConvertMark(){

let display = document.getElementById('display')

let grade = prompt("Enter grade: ")
let alpha = "";

if (grade >= 90)alpha = 'A'
else if(grade >= 80)alpha = 'B'
else if(grade >= 70)alpha = 'C'
else if(grade >=60)alpha = 'D'
else alpha = 'F'

display.innerHTML = alpha


}

h1 {font-family:serif; font-size:36px; color:#ff0000; text-align:center}
h2 {font-family:sans-serif; font-size:24px; color:#000000; text-align:center}
body {background-color:#FFCC00}

    
    <h2>Faculty of Computer science</h2><br>
    <h1>End of year module test results Mark to Grade utility</h1><br><br>
    <h2>Click the button to enter the Mark and display the Grade</h2><br>
  
  <h2><button style="font-size:24px; height:50px; width:300px"; onClick="ConvertMark()"> Click to enter the mark </button></h2><br>
  
<h1 id="display"></h1>