如何在js中为成绩计算器添加条件语句

【问题标题】：How to add a conditional statement to js for grade calculator如何在js中为成绩计算器添加条件语句
【发布时间】：2021-03-26 21:19:27
【问题描述】：

我正在尝试使用 js 制作成绩计算器，但在我的项目中实现条件时遇到了一些问题。 （查看我的代码）我选择了 5 个科目来计算 GPA，并成功实现了这些东西。 （1. 总分 500 分，2. 百分比，3. 成绩点 4. 成绩）但无法执行最终的通过/失败决定。根据我目前的代码，当某人的计算百分比小于 33 时，它被认为是失败的。或者如果大于或等于 33%，则视为通过。我想用这个来改变这个条件>（当任何人进入任何科目的分数低于33分时，他们必须被视为失败）。为了更好地理解，请查看示例：

示例 >

当任何人输入这些值（标记）时：

主题1：36， 主题2：31， 主题3：35， 主题4：30， 主题5：38，

输出：在 500 中，您的总数为 170，百分比为 34.00%。您的成绩为 3.6，成绩为 D。您的 3 门科目及格，2 门科目不及格。

帮我实现这个想法（“你在 3 个科目中通过，在 2 个科目中失败”）

const calcy = () =>{
    let sb1 = document.getElementById('sb1').value;
    let sb2 = document.getElementById('sb2').value;
    let sb3 = document.getElementById('sb3').value;
    let sb4 = document.getElementById('sb4').value;
    let sb5 = document.getElementById('sb5').value;
    let grades = "";
  
    let totalGrades = parseFloat(sb1) + parseFloat(sb2) + parseFloat(sb3) + parseFloat(sb4) + parseFloat(sb5);
  
    let perc = (totalGrades/500*100).toFixed(2);

    let gp = (perc/9.5).toFixed(1);

  
    if(perc <= 100  && perc >= 95){
       grades = ("10 & Grade is A1");
    }else if(perc <= 95  && perc >= 91){
       grades = gp.concat(" & Grade is A1");
    }else if(perc <= 90  && perc >= 81){
       grades = gp.concat(" & Grade is A2");
    }else if(perc <= 80  && perc >= 71){
       grades = gp.concat(" & Grade is B1");
    }else if(perc <= 70  && perc >= 61){
       grades = gp.concat(" & Grade is B2")
    }else if(perc <= 60  && perc >= 51){
       grades = gp.concat(" & Grade is C1");
    }else if(perc <= 50  && perc >= 41){
       grades = gp.concat(" & Grade is C2");
    }else if(perc <= 40  && perc >= 33){
       grades = gp.concat(" & Grade is D");
    }else if(perc <= 32  && perc >= 21){
       grades = gp.concat(" & Grade is E1");
    }else if(perc <= 20  && perc >= 00){
       grades = gp.concat(" & Grade is E2");
    }
  

    if(perc <= 100  && perc >= 91){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}, You are Pass. `
    }
    else if (perc <= 90  && perc >= 81){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 80  && perc >= 71){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 70  && perc >= 61){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 60  && perc >= 51){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 50  && perc >= 41){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 40  && perc >= 33){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 32  && perc >= 21){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Fail. `
    }
    else if(perc <= 20  && perc >= 00)
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Fail. `
    }
<div class="app-form">
            <div class="app-form-group">
              <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 1" id="sb1">
            </div>
            <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 2" id="sb2">
            </div>
             <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 3" id="sb3">
            </div>
            <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 4" id="sb4" >
            </div>
            <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 5" id="sb5" >
            </div>
            <div > 
              <input type="button" name="" value="CALCULATE CGPA" class="app-form-button" onclick="calcy()">
            </div>            
          </div>
          
     <div class="app-form-group showdata">
          <p id="showData" >  </p>
     </div>

【问题讨论】：

  • 我觉得现在的代码行数太多了。稍后我会写一个sn-p
  • 如果百分比 >= 33 并且所有科目的分数 >= 33（通过）...如果失败..如果百分比
  • 我在下面发布了解决方案

标签： javascript html calculator


【解决方案1】：

您可以计算失败的主题并相应地使用逻辑，

const calcy = () =>{
    let sb1 = document.getElementById('sb1').value;
    let sb2 = document.getElementById('sb2').value;
    let sb3 = document.getElementById('sb3').value;
    let sb4 = document.getElementById('sb4').value;
    let sb5 = document.getElementById('sb5').value;
    let grades = "";
    let failCount = 0;
    failCount += sb1 < 33 ? 1: 0;
    failCount += sb2 < 33 ? 1: 0;
    failCount += sb3 < 33 ? 1: 0;
    failCount += sb4 < 33 ? 1: 0;
    failCount += sb5 < 33 ? 1: 0;

    let failedInSubject = failCount > 0;
    failCountText = `You are Pass in ${5-failCount} subject & failed in ${failCount} subject`;

    let totalGrades = parseFloat(sb1) + parseFloat(sb2) + parseFloat(sb3) + parseFloat(sb4) + parseFloat(sb5);
  
    let perc = (totalGrades/500*100).toFixed(2);

    let gp = (perc/9.5).toFixed(1);

  
    if(perc <= 100  && perc >= 95){
       grades = ("10 & Grade is A1");
    }else if(perc <= 95  && perc >= 91){
       grades = gp.concat(" & Grade is A1");
    }else if(perc <= 90  && perc >= 81){
       grades = gp.concat(" & Grade is A2");
    }else if(perc <= 80  && perc >= 71){
       grades = gp.concat(" & Grade is B1");
    }else if(perc <= 70  && perc >= 61){
       grades = gp.concat(" & Grade is B2")
    }else if(perc <= 60  && perc >= 51){
       grades = gp.concat(" & Grade is C1");
    }else if(perc <= 50  && perc >= 41){
       grades = gp.concat(" & Grade is C2");
    }else if(perc <= 40  && perc >= 33){
       grades = gp.concat(" & Grade is D");
    }else if(perc <= 32  && perc >= 21){
       grades = gp.concat(" & Grade is E1");
    }else if(perc <= 20  && perc >= 00){
       grades = gp.concat(" & Grade is E2");
    }
  

    if(failedInSubject) {
        document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. ${failCountText}. `
    } else {

        if(perc <= 100  && perc >= 91){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}, You are Pass. `
    }
    else if (perc <= 90  && perc >= 81){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 80  && perc >= 71){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 70  && perc >= 61){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 60  && perc >= 51){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 50  && perc >= 41){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 40  && perc >= 33){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 32  && perc >= 21){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Fail. `
    }
    else if(perc <= 20  && perc >= 00)
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Fail. `
    }

     }
<div class="app-form">
            <div class="app-form-group">
              <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 1" id="sb1">
            </div>
            <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 2" id="sb2">
            </div>
             <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 3" id="sb3">
            </div>
            <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 4" id="sb4" >
            </div>
            <div class="app-form-group">
              <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 5" id="sb5" >
            </div>
            <div > 
              <input type="button" name="" value="CALCULATE CGPA" class="app-form-button" onclick="calcy()">
            </div>            
          </div>
          
     <div class="app-form-group showdata">
          <p id="showData" >  </p>
     </div>

【讨论】：

    【解决方案2】：

    试试这样：

    const calcy = () => {
  let sb1 = document.getElementById('sb1').value;
  let sb2 = document.getElementById('sb2').value;
  let sb3 = document.getElementById('sb3').value;
  let sb4 = document.getElementById('sb4').value;
  let sb5 = document.getElementById('sb5').value;
  
  let grades = "";

  const passscore = 33;
  
  let array = [parseFloat(sb1), parseFloat(sb2), parseFloat(sb3), parseFloat(sb4), parseFloat(sb5)];

  let totalGrades = array.reduce((total, grade) => total + grade, 0);

  let passes = array.reduce((total, grade) => {
    if (passscore <= grade) {
      total++;
    };

    return total;
  }, 0);

  let fails = array.length - passes;
  
  let result = `<br/>You are Pass in ${passes} subject & failed in ${fails} subject`;

  let perc = (totalGrades / 500 * 100).toFixed(2);

  let gp = (perc / 9.5).toFixed(1);


  if (perc <= 100 && perc >= 95) {
    grades = ("10 & Grade is A1");
  } else if (perc <= 95 && perc >= 91) {
    grades = gp.concat(" & Grade is A1");
  } else if (perc <= 90 && perc >= 81) {
    grades = gp.concat(" & Grade is A2");
  } else if (perc <= 80 && perc >= 71) {
    grades = gp.concat(" & Grade is B1");
  } else if (perc <= 70 && perc >= 61) {
    grades = gp.concat(" & Grade is B2")
  } else if (perc <= 60 && perc >= 51) {
    grades = gp.concat(" & Grade is C1");
  } else if (perc <= 50 && perc >= 41) {
    grades = gp.concat(" & Grade is C2");
  } else if (perc <= 40 && perc >= 33) {
    grades = gp.concat(" & Grade is D");
  } else if (perc <= 32 && perc >= 21) {
    grades = gp.concat(" & Grade is E1");
  } else if (perc <= 20 && perc >= 00) {
    grades = gp.concat(" & Grade is E2");
  }


  if (perc <= 100 && perc >= 91) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}, You are Pass. ${result}`
  } else if (perc <= 90 && perc >= 81) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 80 && perc >= 71) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 70 && perc >= 61) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 60 && perc >= 51) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 50 && perc >= 41) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 40 && perc >= 33) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 32 && perc >= 21) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Fail. ${result}`
  } else if (perc <= 20 && perc >= 00) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade point is ${grades}. You are Fail. ${result}`
  }
}
    <div class="app-form">
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 1" id="sb1">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 2" id="sb2">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 3" id="sb3">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 4" id="sb4">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 5" id="sb5">
  </div>
  <div>
    <input type="button" name="" value="CALCULATE CGPA" class="app-form-button" onclick="calcy()">
  </div>
</div>

<div class="app-form-group showdata">
  <p id="showData"> </p>
</div>

    通过将成绩放入一个数组中，您可以轻松地遍历它们以计算总分并根据它们的值通过/失败。

    【讨论】：

      【解决方案3】：

      这仍然可以优化。

      const form = document.querySelector('.app-form');

const calcy = (event) =>{
   event.preventDefault();
   
   const sb1 = document.getElementById('sb1').value;
   const sb2 = document.getElementById('sb2').value;
   const sb3 = document.getElementById('sb3').value;
   const sb4 = document.getElementById('sb4').value;
   const sb5 = document.getElementById('sb5').value;

   const gradesArray = [parseFloat(sb1), parseFloat(sb2), parseFloat(sb3) ,parseFloat(sb4), parseFloat(sb5)]
   const totalGrades = gradesArray.reduce((acc, e) => acc + e, 0);
   const passGrades = gradesArray.filter(e => e >= 33).length;
   const failGrades = gradesArray.length - passGrades;
    
   const perc = (totalGrades/500*100).toFixed(2);
   const status = (perc <= 100  && perc >= 33) ? 'Pass' : 'Fail';       
   const gp = (perc/9.5).toFixed(1);
  
   let grades = "";
   if(perc <= 100  && perc >= 95){
       grades = ("10 & Grade is A1");
   }else if(perc <= 95  && perc >= 91){
       grades = gp.concat(" & Grade is A1");
   }else if(perc <= 90  && perc >= 81){
       grades = gp.concat(" & Grade is A2");
   }else if(perc <= 80  && perc >= 71){
      grades = gp.concat(" & Grade is B1");
   }else if(perc <= 70  && perc >= 61){
      grades = gp.concat(" & Grade is B2")
   }else if(perc <= 60  && perc >= 51){
      grades = gp.concat(" & Grade is C1");
   }else if(perc <= 50  && perc >= 41){
      grades = gp.concat(" & Grade is C2");
   }else if(perc <= 40  && perc >= 33){
      grades = gp.concat(" & Grade is D");
   }else if(perc <= 32  && perc >= 21){
      grades = gp.concat(" & Grade is E1");
   }else if(perc <= 20  && perc >= 0){
      grades = gp.concat(" & Grade is E2");
   }
  
   document.getElementById('showData').innerHTML = 
    ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
      <br> Your grade point is ${grades}. You are ${status}. 
      <br>  You are Pass in ${passGrades} subject & failed in ${failGrades} subject`
}

form.addEventListener('submit', calcy, false)
          <form class="app-form">
      <div class="app-form-group">
        <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 1" id="sb1">
      </div>
      <div class="app-form-group">
        <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 2" id="sb2">
      </div>
       <div class="app-form-group">
        <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 3" id="sb3">
      </div>
      <div class="app-form-group">
        <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 4" id="sb4" >
      </div>
      <div class="app-form-group">
        <input maxlength="3" type="text"  class="app-form-control"   placeholder="SUBJECT 5" id="sb5" >
      </div>
      <div > 
        <input type="submit" value="CALCULATE CGPA" class="app-form-button">
      </div>            
    </div>
          
     <div class="app-form-group showdata">
          <p id="showData" >  </p>
     </div>
</form>

      【讨论】：

        【解决方案4】：

        我试图通过在需要的地方使用函数来尽可能地简化代码。

        我暂时避免使用数组，因为只有 5 个主题。

        const calcy = () => {
  document.getElementById("showData").innerHTML = result();
};

const result = () => {
  const sb1 = document.getElementById("sb1").value;
  const sb2 = document.getElementById("sb2").value;
  const sb3 = document.getElementById("sb3").value;
  const sb4 = document.getElementById("sb4").value;
  const sb5 = document.getElementById("sb5").value;
  const totalGrades =
    parseFloat(sb1) +
    parseFloat(sb2) +
    parseFloat(sb3) +
    parseFloat(sb4) +
    parseFloat(sb5);
  const numberOfPassedSubjects =
    checkPass(sb1) +
    checkPass(sb2) +
    checkPass(sb1) +
    checkPass(sb1) +
    checkPass(sb1);

  const numberOfFailedSubjects = 5 - numberOfPassedSubjects;
  const perc = ((totalGrades / 500) * 100).toFixed(2);
  const gp = (perc / 9.5).toFixed(1);
  const grade = grader(perc);

  message =
    "<div class='your_custom_class' >Out of 500, your total is <strong> " +
    totalGrades +
    ".</strong> <br />" +
    " Your percentage is " +
    perc +
    " %.<br />" +
    " Your Grade point is " +
    gp +
    "<br />" +
    " Grade is " +
    grade +
    "<br />" +
    " You have passed in " +
    numberOfPassedSubjects +
    " subjects and " +
    " You have failed in " +
    numberOfFailedSubjects +
    " subjects.</div>";
  return message;
};

var checkPass = (sbMarks) => {
  if (sbMarks >= 33) {
    return 1;
  } else return 0;
};

const gpCalc = (perc) => {
  initialGP = (perc / 9.5).toFixed(1);
  if (initialGP > 10) {
    return 10;
  } else return initialGP;
};
const grader = (perc) => {
  if (perc >= 91) {
    return "A1";
  } else if (perc >= 81) {
    return "A2";
  } else if (perc >= 71) {
    return "B1";
  } else if (perc >= 61) {
    return "B2";
  } else if (perc >= 51) {
    return "C1";
  } else if (perc >= 41) {
    return "C2";
  } else if (perc >= 31) {
    return "D";
  } else if (perc >= 21) {
    return "E1";
  } else if (perc >= 0) {
    return "E2";
  }
};
        <div class="app-form">
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 1" id="sb1">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 2" id="sb2">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 3" id="sb3">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 4" id="sb4">
  </div>
  <div class="app-form-group">
    <input maxlength="3" type="text" class="app-form-control" placeholder="SUBJECT 5" id="sb5">
  </div>
  <div>
    <input type="button" name="" value="CALCULATE CGPA" class="app-form-button" onclick="calcy()">
  </div>
</div>

<div class="app-form-group showdata">
  <p id="showData"> </p>
</div>

        以上是逻辑，您的结果应该在消息对象中提供，该对象将适当地返回给您的第一个calcy函数。

        我建议您在输入中添加条件检查，以确保输入时数字低于 100。

        【讨论】：

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2015-09-09
          • 2017-03-01
          • 1970-01-01
          • 2015-05-31
          • 1970-01-01
          • 1970-01-01
          • 2019-05-11
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode