CODEWITHSUNDEEP
javascripthtml
csme
csme

Reputation: 33

How can I get a blank input to be considered as 0 in my program?

I am trying to build a GPA calculator, and but want to make the process of inputting grades easier. Under the current state of the calculator, a student must manually enter all numbers into the inputs, even if they did not receive a grade of that letter (and would thus input a zero). Is there a way I could get the program to interpret a blank input as a zero? Thanks!

function computeGPA() {
  var aPlus = document.getElementById("aPlus").value;
  var a = document.getElementById("a").value;
  var aMinus = document.getElementById("aMinus").value;
  var bPlus = document.getElementById("bPlus").value;
  var b = document.getElementById("b").value;
  var bMinus = document.getElementById("bMinus").value;
  var cPlus = document.getElementById("cPlus").value;
  var c = document.getElementById("c").value;
  var cMinus = document.getElementById("cMinus").value;
  var dPlus = document.getElementById("dPlus").value;
  var d = document.getElementById("d").value;
  var dMinus = document.getElementById("dMinus").value;
  var f = document.getElementById("f").value;
  var og = ((aPlus * 4) + (a * 4) + (aMinus * 3.7) + (bPlus * 3.3) + (b * 3) + (bMinus * 2.7) + (cPlus * 2.3) + (c * 2) +
    (cMinus * 1.7) + (dPlus * 1.3) + (d * 1) + (dMinus * .7)) / (parseInt(aPlus) +
    parseInt(a) + parseInt(aMinus) + parseInt(bPlus) + parseInt(b) + parseInt(bMinus) +
    parseInt(cPlus) + parseInt(c) + parseInt(cMinus) +
    parseInt(dPlus) + parseInt(d) + parseInt(dMinus) + parseInt(f));
  var prettyOg = og.toFixed(2);
  document.getElementById("og").innerHTML = "GPA: " + prettyOg;
}
<!DOCTYPE html>
<html>
<title>Final Grade Calculator</title>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="gpa.css">
</head>
<nav>
  <ul>
    <LH>Class Calculator</LH>
    <li><a href="/Users/rmogauro21/Desktop/CC/Needed/needed.html"> Needed Grade</a></li>
    <li><a href="/Users/rmogauro21/Desktop/CC/Final /final.html"> Final Grade</a></li>
    <li><a href="/Users/rmogauro21/Desktop/CC/GPA /gpa.html"> GPA Calculator</a></li>
    <li><a href="/Users/rmogauro21/Desktop/CC/About/about.html"> About Page</a></li>
    <li><a href="/Users/rmogauro21/Desktop/CC/Header/header.html"> Home Page</a></li>
  </ul>
</nav>

</body>
<h1> GPA Calculator</h1>
<p>Number of A+:<input id="aPlus" min="0" max="120"></input>
</p>
<p>Number of A: <input id="a" min="0" max="120"></input>
</p>
<p>Number of A-:<input id="aMinus" min="0" max="120"></input>
</p>
<p>Number of B+:<input id="bPlus" min="0" max="120"></input>
</p>
<p>Number of B: <input id="b" min="0" max="120"></input>
</p>
<p>Number of B-:<input id="bMinus" min="0" max="120"></input>
</p>
<p>Number of C+:<input id="cPlus" min="0" max="120"></input>
</p>
<p>Number of C: <input id="c" min="0" max="120"></input>
</p>
<p>Number of C-:<input id="cMinus" min="0" max="120"></input>
</p>
<p>Number of D+:<input id="dPlus" min="0" max="100"></input>
</p>
<p>Number of D: <input id="d" min="0" max="120"></input>
</p>
<p>Number of D-:<input id="dMinus" min="0" max="120"></input>
</p>
<p>Number of F: <input id="f" min="0" max="120" <br>
  <br>
  <br>
  <button onclick="computeGPA()">Submit</button>
  <h2 id="og"></h2>
  <h3>Note: please fill in "0" for all grades that you haven't recieved</h3>
  <h4>If you have any questions about the GPA calculator, click <a href="/Users/rmogauro21/Desktop/CC/GPA /gpainfo.html">here</h4>
    </html>

Upvotes: 0

Views: 50

Answers (1)

user120242
user120242

Reputation: 15268

Uses unary operator + to coerce to number. Blank strings coerced to 0.

Added ||1 to prevent division by 0. In num||1, if num is 0 it will be falsey, and it will return 1, preventing division by 0.

I think also that you meant to use type="number" for your inputs, like so:
<input type="number" id="aPlus" min="0" max="120"></input> ?
I added a line of JavaScript to add it to all tags, but you can just type them out into the HTML.

document.querySelectorAll('input').forEach(x=>x.setAttribute('type','number'))
<!DOCTYPE html>
    <html>
    <title>Final Grade Calculator</title>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
    href="gpa.css">
    <script>
    function computeGPA() {
    var aPlus = +document.getElementById("aPlus").value;
    var a = +document.getElementById("a").value;
    var aMinus = +document.getElementById("aMinus").value;
    var bPlus = +document.getElementById("bPlus").value;
    var b = +document.getElementById("b").value;
    var bMinus = +document.getElementById("bMinus").value;
    var cPlus = +document.getElementById("cPlus").value;
    var c = +document.getElementById("c").value;
    var cMinus = +document.getElementById("cMinus").value;
    var dPlus = +document.getElementById("dPlus").value;
    var d = +document.getElementById("d").value;
    var dMinus = +document.getElementById("dMinus").value;
    var f = +document.getElementById("f").value;
    var og = ((aPlus*4)+(a*4)+(aMinus*3.7)+(bPlus*3.3)+(b*3)+(bMinus*2.7)+(cPlus*2.3)+(c*2)+
    (cMinus*1.7)+(dPlus*1.3)+(d*1)+(dMinus*.7))
    /
    ((parseInt(aPlus)+                 
    parseInt(a)+parseInt(aMinus)+parseInt(bPlus)+parseInt(b)+ parseInt(bMinus)+
    parseInt(cPlus)+ parseInt(c)+ parseInt(cMinus)+     
    parseInt(dPlus)+parseInt(d)+parseInt(dMinus)+ parseInt(f)) || 1); // prevent div by 0
    var prettyOg = og.toFixed(2);
    document.getElementById("og").innerHTML = "GPA: " + prettyOg;
    }
    </script>
    </head>
    <nav>
    <ul>
    <LH>Class Calculator</LH>
    <li><a href = "/Users/rmogauro21/Desktop/CC/Needed/needed.html"> Needed Grade</a></li>
    <li><a href = "/Users/rmogauro21/Desktop/CC/Final /final.html"> Final Grade</a></li>
    <li><a href = "/Users/rmogauro21/Desktop/CC/GPA /gpa.html"> GPA Calculator</a></li>
    <li><a href = "/Users/rmogauro21/Desktop/CC/About/about.html"> About Page</a></li>
    <li><a href = "/Users/rmogauro21/Desktop/CC/Header/header.html"> Home Page</a></li>
    </ul>
    </nav>

    </body>
    <h1> GPA Calculator</h1>
    <p>Number of A+:<input id="aPlus" min="0" max="120"></input></p>
    <p>Number of A: <input id="a" min="0" max="120"></input></p>
    <p>Number of A-:<input id="aMinus" min="0" max="120"></input></p>
    <p>Number of B+:<input id="bPlus" min="0" max="120"></input></p>
    <p>Number of B: <input id="b" min="0" max="120"></input></p>
    <p>Number of B-:<input id="bMinus" min="0" max="120"></input></p>
    <p>Number of C+:<input id="cPlus" min="0" max="120"></input></p>
    <p>Number of C: <input id="c" min="0" max="120"></input></p>
    <p>Number of C-:<input id="cMinus" min="0" max="120"></input></p>
    <p>Number of D+:<input id="dPlus" min="0" max="100"></input></p>
    <p>Number of D: <input id="d" min="0" max="120"></input></p>
    <p>Number of D-:<input id="dMinus" min="0" max="120"></input></p>
    <p>Number of F: <input id="f" min="0" max="120"
    <br>
    <br>
    <br>
    <button onclick="computeGPA()">Submit</button>
    <h2 id="og"></h2>
    <h3>Note: please fill in "0" for all grades that you haven't recieved</h3>
    <h4>If you have any questions about the GPA calculator, click <a href =         
    "/Users/rmogauro21/Desktop/CC/GPA /gpainfo.html">here</h4>
    </html>

Upvotes: 1

Related Questions