首页 > 解决方案 > 使用javascript制作评分计算器

问题描述

<!DOCTYPE html>
<html>
    <head>
        <title>Grade Calculator</title>
    
        <script>
            function doubleMe()
            {
                var number;
                var total;
                
                number = document.getElementById('txtnumber').value;
                
                number = Number(number);
                total = number * 2;
                
                console.log("number(): " + number +  " " + total);
                
                
                number = document.getElementById('txtnumber').value;
                number = parseInt(number);
                total = number * 2;
                
                console.log("parseInt(): " + number + " " + total);
                
                number = document.getElementById('txtnumber').value;
                number = parseFloat(number);    
                total = number * 2;
                
                console.log("parseFloat(): " + number + " " + total);
                
                document.getElementById('divOutput').innerHTML = total;
            }
            </script>
    </head>
    
    <body>
        <h1>Grade Calculator</h1>
        
        Term 1 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
        Term 2 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
        Term 3 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
        Final Exam Mark: <input type = 'text' id = 'txtnumber' /><br><br>
        Term 1 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
        Term 2 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
        Term 3 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
        
        <input type = 'button' value = 'Press Me' onclick = 'doubleMe();' /><br><br>
        
        <div id = 'divOutput'></div>
    </body>
</html>

你好,我想制作一个评分计算器,你可以在其中输入你的分数和百分比,一旦你点击“按我”,它就会把你所有的成绩加起来,然后给你最终成绩。但是我似乎无法上班,有人可以帮帮我吗?谢谢,麻烦您了!

标签: javascripthtml

解决方案


我对您的代码进行了一些调整,它将输入第 1 学期、第 2 学期、第 3 学期和期末学期的分数。考虑到每个学期的分数超过 100,将返回总和和百分比。

<!DOCTYPE html>
<html>
  <head>
    <title>Grade Calculator</title>
  </head>
  <body>
    <h1>Grade Calculator</h1>
    Term 1 Mark: <input type="text" id="txtnumber1" /><br /><br />
    Term 2 Mark: <input type="text" id="txtnumber2" /><br /><br />
    Term 3 Mark: <input type="text" id="txtnumber3" /><br /><br />
    Final Exam Mark: <input type="text" id="txtnumber4" /><br /><br />
    Term 1 Percentage: <input type="text" id="txtnumber5" /><br /><br />
    Term 2 Percentage: <input type="text" id="txtnumber6" /><br /><br />
    Term 3 Percentage: <input type="text" id="txtnumber7" /><br /><br />
    <input type="button" value="Press Me" onclick="percentage();" /><br /><br />
    <div id="divOutpuTotal"></div>
    <div id="divOutputPercentage"></div>

    <script>
      function percentage() {
        var total;
        var total =
          Number(document.getElementById("txtnumber1").value) +
          Number(document.getElementById("txtnumber2").value) +
          Number(document.getElementById("txtnumber3").value) +
          Number(document.getElementById("txtnumber4").value);
        document.getElementById("divOutpuTotal").innerHTML = total;
        document.getElementById("divOutputPercentage").innerHTML = total / 4;
      }
    </script>
  </body>
</html>

您可以根据您的具体要求更多地改进逻辑。


推荐阅读