JS平均计算

时间：2018-10-13 15:20:57

标签： javascript math average

我正在尝试创建一个网站，该网站可以计算某个学科中某人的年平均成绩。但是，当单击按钮“计算”时，它将返回“ [对象HTMLHeadingElement] [对象HTMLHeadingElement] [对象HTMLHeadingElement] [对象HTMLHeadingElement] [对象HTMLHeadingElement] NaN”。怎么了？

<!DOCTYPE html>
<html lang="pt-br">
    <meta charset="utf-8"/>
    <head>
        <title>Annual Average Grade</title>
        <meta name="description" content="Calculate your annual average grade."/>
        <link rel="apple-touch-icon" sizes="180x180" href="../favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="192x192" href="../favicons/android-chrome-192x192.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../favicons/favicon-16x16.png">
        <link rel="manifest" href="../favicons/site.webmanifest">
        <link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="../favicons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-TileImage" content="../favicons/mstile-144x144.png">
        <meta name="msapplication-config" content="../favicons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
    </head>
    <style>
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Segoe UI';
        }
        a, b {
            font-family: 'Segoe UI';
        }
        button {
            border-radius: 5px 5px 5px 5px;
            background-color: white;
        }
        input {
            border-radius: 5px 5px 5px 5px;
            border-color: black;
            border-width: 1px;
            height: 25px;
        }
        .align-left {
            text-align: left;
        }
        .align-center {
            text-align: center;
        }
        .align-right {
            text-align: right;
        }
        .title {
            text-align: center;
            font-weight: bolder;
        }
        .description {
            text-align: center;
            font-size: 17px;
            font-weight: lighter;
        }
        .subtitle {
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }
        .grade {
            text-align: center;
            margin-left: 15px;
        }
    </style>
    <body>
        <h1 class="title" style="margin-left: 15px">Annual Average Grade</h1>
        <h2 class="description" style="margin-top: -20px">Calculate your annual average grade.</h2>
        <br/>
        <br/>
        <h3 class="subtitle">Mathematics</h3>
        <div class="grade">
        <h4 id="first-grade">1st grade:</h3><input type="number"/>
        <h4 id="second-grade">2nd grade:</h3><input type="number"/>
        <h4 id="third-grade">3rd grade:</h3><input type="number"/>
        <h4 id="fourth-grade">4th grade:</h3><input type="number"/>
        <h4 id="fifth-grade">5th grade</h3><input type="number"/>
        <h4 id="sixth-grade">6th grade:</h3><input type="number"/>
        </div>
        <br/>
        <div class="align-center">
        <button onclick="calcGradeAverage()">Calculate</button>
        </div>
        <script>
            function calcGradeAverage() {
                var firstGrade = document.getElementById('first-grade');
                var secondGrade = document.getElementById('second-grade');
                var thirdGrade = document.getElementById('third-grade');
                var fourthGrade = document.getElementById('fourth-grade');
                var fifthGrade = document.getElementById('fifth-grade');
                var sixthGrade = document.getElementById('sixth-grade');
                var res = firstGrade + secondGrade + thirdGrade + fourthGrade + fifthGrade + sixthGrade / 6;
                document.write(res);
         }
        </script>
    </body>
</html>

3 个答案:

答案 0 :(得分：1)

您正在使用hmtl对象计算成绩。您需要从那里获取值（使用.value（））

答案 1 :(得分：1)

将您的代码替换为以下代码：我将解释原因。

说明（我将以一种简化的方式进行解释;-））：

*为了让我们看到计算结果，我们需要计算平均成绩

*要计算成绩的平均值，首先需要获得成绩

*要获得成绩，我们需要表格中的值

*要获取值，我们需要访问HTML DOM

访问DOM元素的方式是这种方式

    document.getElementById('myid');

在DOM元素中访问值的方法是这种方式

    document.getElementById('myid').value;

*因此，在HTML中，我从<h3>中获取了id =“”并将其放在<input>标记中 *然后在JavaScript中，我调用了用户输入的值。

仅此而已。

 <!DOCTYPE html><html lang="pt-br">
    <meta charset="utf-8"/>
    <head>
        <title>Annual Average Grade</title>
        <meta name="description" content="Calculate your annual average grade."/>
        <link rel="apple-touch-icon" sizes="180x180" href="../favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="192x192" href="../favicons/android-chrome-192x192.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../favicons/favicon-16x16.png">
        <link rel="manifest" href="../favicons/site.webmanifest">
        <link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="../favicons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-TileImage" content="../favicons/mstile-144x144.png">
        <meta name="msapplication-config" content="../favicons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
    </head>
    <style>
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Segoe UI';
        }
        a, b {
            font-family: 'Segoe UI';
        }
        button {
            border-radius: 5px 5px 5px 5px;
            background-color: white;
        }
        input {
            border-radius: 5px 5px 5px 5px;
            border-color: black;
            border-width: 1px;
            height: 25px;
        }
        .align-left {
            text-align: left;
        }
        .align-center {
            text-align: center;
        }
        .align-right {
            text-align: right;
        }
        .title {
            text-align: center;
            font-weight: bolder;
        }
        .description {
            text-align: center;
            font-size: 17px;
            font-weight: lighter;
        }
        .subtitle {
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }
        .grade {
            text-align: center;
            margin-left: 15px;
        }
    </style>
    <body>
        <h1 class="title" style="margin-left: 15px">Annual Average Grade</h1>
        <h2 class="description" style="margin-top: -20px">Calculate your annual average grade.</h2>
        <br/>
        <br/>
        <h3 class="subtitle">Mathematics</h3>
        <div class="grade">
        <h3 >1st grade:</h3><input type="number" id="first-grade" />
        <h3 >2nd grade:</h3><input type="number" id="second-grade" />
        <h3 >3rd grade:</h3><input type="number" id="third-grade" />
        <h3 >4th grade:</h3><input type="number" id="fourth-grade" />
        <h3 >5th grade:</h3><input type="number" id="fifth-grade" />
        <h3 >6th grade:</h3><input type="number" id="sixth-grade" />
        </div>
        <br/>
        <div class="align-center">
        <button onclick="calcGradeAverage()">Calculate</button>
        </div>
        <script>
            function calcGradeAverage() {
                var firstGrade = document.getElementById('first-grade').value;
                var secondGrade = document.getElementById('second-grade').value;
                var thirdGrade = document.getElementById('third-grade').value;
                var fourthGrade = document.getElementById('fourth-grade').value;
                var fifthGrade = document.getElementById('fifth-grade').value;
                var sixthGrade = document.getElementById('sixth-grade').value;
                var res = firstGrade + secondGrade + thirdGrade + fourthGrade + fifthGrade + sixthGrade / 6;
                document.write(res);
         }
         /*
         Explanation (I will explain in a verrrrry simplified way ;-) ):

         *For us to see the results of our calculation , we need to calculate the average of the grades
         *For us to calculate the average of grades , we need to first have the grades
         *For us to have the grades , we need values from the forms
         *For us to have the values , we need to access the HTML DOM

         The way to access the DOM elements is this way

            document.getElementById('myid')

         The way to access values in a DOM element is this way

            document.getElementById('myid').value

          *So in HTML , I took the id="" from <h3> and placed it in <input> tags
          *Then in JavaScript , I called the values inputted by the user .

          Thats all .
         */
        </script>
    </body>
</html>

答案 2 :(得分：0)

您只需要输入.value 

var firstGrade = document.getElementById('first-grade').value;
var secondGrade = document.getElementById('second-grade').value;
var thirdGrade = document.getElementById('third-grade').value;
var fourthGrade = document.getElementById('fourth-grade').value;
var fifthGrade = document.getElementById('fifth-grade').value;
var sixthGrade = document.getElementById('sixth-grade').value;

写这样的文档类型也是一种好习惯：

<!DOCTYPE html>

尽管不是必需的。

相关问题
最新问题