时间戳

首页 > 解决方案 > 如何在我的程序中将空白输入视为 0？

javascript - 如何在我的程序中将空白输入视为 0？

问题描述

我正在尝试构建一个 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>

标签： javascripthtml

解决方案

使用一元运算符 + 强制编号。空白字符串强制为 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>

推荐阅读