Как я могу получить пустой ввод, который будет считаться 0 в моей программе? - PullRequest
0 голосов
/ 27 мая 2020

Я пытаюсь создать калькулятор GPA, но хочу упростить процесс ввода оценок. В текущем состоянии калькулятора ученик должен вручную ввести все числа во входные данные, даже если он не получил оценку на эту букву (и, таким образом, ввел бы ноль). Есть ли способ заставить программу интерпретировать пустой ввод как ноль? Спасибо!

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>

1 Ответ

1 голос
/ 27 мая 2020

Использует унарный оператор + для приведения к числу. Пустые строки приведены к 0.

Добавлен ||1, чтобы предотвратить деление на 0. В num||1, если num равно 0, это будет ложным и вернет 1, предотвращая деление на 0.

Я также думаю, что вы хотели использовать type="number" для своих входных данных, например:
<input type="number" id="aPlus" min="0" max="120"></input>?
Я добавил строку JavaScript, чтобы добавить ее ко всем тегам, но вы можно просто ввести их в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...