JS 平均计算答案

【问题标题】：JS average calcJS 平均计算
【发布时间】：2018-10-13 15:20:57
【问题描述】：

我正在尝试创建一个网站来计算某人在某个学科中的年平均成绩。但是，当单击“计算”按钮时，它会返回“[object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement][object 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>

【问题讨论】：

您检索的是标题，而不是输入。
@j08691 如何检索输入？
最简单的方法是将 ID 从标题移动到输入。然后你可以做parseInt( document.getElementById('first-grade').value, 10); ...，这将返回正在输入的字符串的整数值。

标签： javascript math average

【解决方案1】：

您正在使用 hmtl-objects 计算您的成绩。您需要从那里获取价值（使用 .value() ）

【讨论】：

【解决方案2】：

用下面的代码替换你的代码：我会解释原因。

解释（我会以一种非常简单的方式解释 ;-)）：

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

*为了计算平均成绩，我们需要先得到成绩

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

*为了获得值，我们需要访问 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>

【讨论】：

【解决方案3】：

你只需要输入 .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>

虽然不是必需的。

【讨论】：

感谢您的评论。我编辑了帖子。请点赞，因为我是新会员。