JavaScript live grade Calculator Worth noting:
I cannot use any languages other than HTML5 and JavaScript (no JQuery!).
Grade calculator needs to update live.
Grade calculator needs to show a percentage grade based off score obtained/score possible AND a letter grade.
I've been at this for three days.  Please help me, and if possible, please explain why my code doesn't work, or why the solution does vs. mine, so that I can learn.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Grade Calculator&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet"  href="styles.css"&gt;
    &lt;link rel="javascript" href="script.js"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;h1&gt;SAIT Grade Calculator&lt;/h1&gt;
    &lt;/header&gt;
    &lt;main class="wrapper"&gt;
        &lt;h1&gt; Grade Calculator &lt;/h1&gt;

        &lt;input type="text" id= "enumerator" onkeyup="setGrades();" /&gt;
        &lt;input type= "text" id = "denominator" onkeyup="setGrades();"/&gt;


        &lt;h2&gt;Your Percentage Grade &lt;/h2&gt;
            &lt;p&gt;Your percentage grade is: &lt;/p&gt;
        &lt;input type="text" id="percentgrade"&gt;
        &lt;h2&gt;Your Letter Grade &lt;/h2&gt;
        &lt;p&gt;Your letter grade is: &lt;/p&gt;
        &lt;input type="text" id="letter"&gt;


    &lt;/main&gt;
&lt;script&gt;
    function setGrades (){
     var gradeobtained = 
parseFloat(document.getElementById('enumerator').value);
    var gradepossible = 
parseFloat(document.getElementById('denominator').value);



        var numbergrade = (gradeobtained / gradepossible)*100) ; 
document.getElementById('total').value = numbergrade;
var percentscore = 
if (numbergrade&gt;=101) {
document.getElementById("percentgrade").innerHTML = "Sorry, it is not 
possible to have a grade over 100%"
}
else {
document.getElementById("percentgrade").innerHTML = numbergrade.value
};



    var lettergrade = if(numbergrade &gt;= 90){
        document.getElementById('letter').value = "A+";
    }

    else if(89 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 85){
        document.getElementById('letter').value = "A";
    }

    else if(84 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 80){
        document.getElementById('letter').value = "A-";
    }

    else if(79 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 76){
        document.getElementById('letter').value = "B+";
    }

    else if(75 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 73){
        document.getElementById('letter').value = "B";
    }

    else if(72 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 70){
        document.getElementById('letter').value = "B-";
    }

    else if(69 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 66){
        document.getElementById('letter').value = "C+";
    }

    else if(65 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 63){
        document.getElementById('letter').value = "C";
    }

else if(62 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 60){
document.getElementById('letter').value = "C-";
}

else if(59 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 55){
document.getElementById('letter').value = "D+";
}
else if(54 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 50){
document.getElementById('letter').value = "D";
}
else{
document.getElementById('letter').value = "F";
}
} ;

&lt;/script&gt;
&lt;footer&gt;© Nicole  2017&lt;/footer&gt;
&lt;/body&gt;&lt;/html&gt;
Firstly, there's an error in the code you've written which will prevent the calculator from working correctly:

document.getElementById('total').value = numbergrade;


You don't have an element with the ID of total so this will fail. I'm guessing you want to change this ID to percentgrade.

You also have invalid syntax here:

var percentscore =
if (numbergrade&gt;=101) {


You need to assign a value to percentscore if you put an = sign after it. You're actually not using it in the rest of the code so you can get rid of the variable completely.



Next it can be cleaned up a bit. if (numbergrade &gt;= 101) is a little unclear, compared to the shorter and simpler if (numbergrade &gt; 100). The number 100 has meaning for a test because it's the maximum grade. The number 101 doesn't it's simply an invalid value. You could also extract this out into a variable to assign an even stronger meaning.

var MAX_OBTAINABLE = 100;

if (numbergrade &gt; MAX_OBTAINABLE) {


Note the capital casing to indicate a constant. In more modern iterations of javascript you can actually create a true constant by using the const keyword rather than var or let

const MAX_OBTAINABLE = 100;




The next part which needs to be changed is your rendering of the values. Your percentgrade element is a textbox, so you should be setting it's value property. Currently you are setting the innerHTML which won't work.

document.getElementById("percentgrade").innerHTML = 


Should become

document.getElementById("percentgrade").value = 




The last part where you calculate the grade letter, could also do with some improvements. Whenever you find yourself using the same calculated more than once or twice, it becomes a good candidate to store in a variable. In this case, you've written document.getElementById('letter') many times. You can shorten in by extracting it into a variable before you start to determine the grade letter

var letterDisplay = document.getElementById('letter');

if (numbergrade &gt;= 90) {
    letterDisplay.value = 'A+';
}
else if (89 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 85){
    letterDisplay.value = "A";
}

// ... etcetera


On this first line you've also attempted to assign the variable lettergrade to an if statement which is invalid syntax.

var lettergrade = if(numbergrade >= 90) {

You don't seem to be using this variable so you could get rid of this assignment. However, you could actually use that variable to make the above code even shorter. Starting off with the letter grade set to F we can do the following:

var letterDisplay = document.getElementById('letter');
var lettergrade = 'F';

if (numbergrade &gt;= 90) {
    lettergrade = "A+";
}
else if (89 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 85) {
    lettergrade = "A";
}

// .... all the other if statements here.

else if (54 &gt;= numbergrade &amp;&amp; numbergrade &gt;= 50) {
    lettergrade = 'D';
}

letterDisplay.value = lettergrade;


There are some more ways you could improve on this, but that's a few of the basic, for some slightly more advanced concepts like objects, functions and looping, take a look at this JS fiddle I created and have a play around