文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >有没有办法使用JS代码来计算平均值？

问有没有办法使用JS代码来计算平均值？
EN

Stack Overflow用户
提问于 2019-06-02 02:04:50
回答 3查看 90关注 0票数 0

我正在尝试使用Javascript计算平均值，并有以下代码显示给您。我正在构建一个需要计算平均分数的应用程序。

我一直在尝试用JavaScript构建一个计算器，在这个计算器中，你点击两个单选按钮，然后在点击一个按钮后试图得到一个平均值。您可以在下面找到单选按钮的HTML代码：

代码语言：javascript
复制
<div class="container">
    <div class="row">
        <div style = "text-align:center">
            APS Calculator 
            <form action=""  id="calculator" onsubmit="fn1 ()>
            Maths
            <p>
            <input type = "radio" name = "APS Maths" value="9">9<br>
            <input type = "radio" name = "APS Maths" value="8">8<br>
            <input type = "radio" name = "APS Maths" value="7">7<br>
            <input type = "radio" name = "APS Maths" value="6">6<br>
            <input type = "radio" name = "APS Maths" value="5">5<br>
            <input type = "radio" name = "APS Maths" value="4">4<br>
            <input type = "radio" name = "APS Maths" value="3">3<br>
            <input type = "radio" name = "APS Maths" value="2">2<br>
            <input type = "radio" name = "APS Maths" value="1">1<br>
            <input type = "radio" name = "APS Maths" value="0">0<br>
            </p>
            English
            <p>
            <input type = "radio" name = "APS English" value="9">9<br>
            <input type = "radio" name = "APS English" value="8">8<br>
            <input type = "radio" name = "APS English" value="7">7<br>
            <input type = "radio" name = "APS English" value="6">6<br>
            <input type = "radio" name = "APS English" value="5">5<br>
            <input type = "radio" name = "APS English" value="4">4<br>
            <input type = "radio" name = "APS English" value="3">3<br>
            <input type = "radio" name = "APS English" value="2">2<br>
            <input type = "radio" name = "APS English" value="1">1<br>
            <input type = "radio" name = "APS English" value="0">0<br>

            <br>
                <button onclick="fn1 ()" id = "btn1"> Click Me</button>



            </p>
            </form>
        </div>
        </div>
    </div>

每当我选择两个单选按钮后点击按钮，输出要么是"Your at is : NaN“，要么根本没有输出。我能找到一种方法来根据我点击的按钮输出平均值吗？

下面是JavaScript代码：

​

代码语言：javascript
复制
var EnglishStudent = parseInt(document.getElementsByName('APS English'));
var MathsStudent = parseInt(document.getElementsByName('APS Maths'));
var avg = (EnglishStudent + MathsStudent) / 2;

function fn1(EnglishStudent, MathsStudent)

{
  var EnglishStudent = parseInt(document.getElementsByName('APS English'));
  var MathsStudent = parseInt(document.getElementsByName('APS Maths'));
  var avg = (EnglishStudent + MathsStudent) / 2;
  return avg;
}
代码语言：javascript
复制
<div class="container">
    <div class="row">
        <div style = "text-align:center">
            APS Calculator 
            <form action=""  id="calculator" onsubmit="fn1 ()>
            Maths
            <p>
            <input type = "radio" name = "APS Maths" value="9">9<br>
            <input type = "radio" name = "APS Maths" value="8">8<br>
            <input type = "radio" name = "APS Maths" value="7">7<br>
            <input type = "radio" name = "APS Maths" value="6">6<br>
            <input type = "radio" name = "APS Maths" value="5">5<br>
            <input type = "radio" name = "APS Maths" value="4">4<br>
            <input type = "radio" name = "APS Maths" value="3">3<br>
            <input type = "radio" name = "APS Maths" value="2">2<br>
            <input type = "radio" name = "APS Maths" value="1">1<br>
            <input type = "radio" name = "APS Maths" value="0">0<br>
            </p>
            English
            <p>
            <input type = "radio" name = "APS English" value="9">9<br>
            <input type = "radio" name = "APS English" value="8">8<br>
            <input type = "radio" name = "APS English" value="7">7<br>
            <input type = "radio" name = "APS English" value="6">6<br>
            <input type = "radio" name = "APS English" value="5">5<br>
            <input type = "radio" name = "APS English" value="4">4<br>
            <input type = "radio" name = "APS English" value="3">3<br>
            <input type = "radio" name = "APS English" value="2">2<br>
            <input type = "radio" name = "APS English" value="1">1<br>
            <input type = "radio" name = "APS English" value="0">0<br>

            <br>
                <button onclick="fn1 ()" id = "btn1"> Click Me</button>



            </p>
            </form>
        </div>
        </div>
    </div>

​

谢谢你的帮助。

javascript
EN

回答 3

Stack Overflow用户

发布于 2019-06-02 02:35:17

所以这里有很多问题：

  • Firstoff -使用单选按钮来做这件事并不是很酷(这么说吧)
  • Second:你不能有和未关闭的onsubmit="fn1 ()属性。它需要是带有结束".
  • Next的onsubmit="fn1 ()"，你不能只用document.getElementsByName('APS English')访问选中的单选按钮，因为这会给你所有的元素都有name="APS English" -这也是为什么我建议去掉单选按钮的原因。单选按钮没有任何活动状态或任何类型的状态，所以你可以在js中访问它们，除非你为它们中的每一个都设置了一个属性，当它们改变的时候。我更愿意做这样的事情：

​

代码语言：javascript
复制
function fn1(EnglishStudent, MathsStudent){
var EnglishStudent = parseInt(document.getElementById("math").value);
var MathsStudent = parseInt(document.getElementById("english").value);
var avg = (EnglishStudent + MathsStudent) / 2;
  alert(avg);
}
代码语言：javascript
复制
<div class="container">
    <div class="row">
        <div style = "text-align:center">
            APS Calculator 
            <form action=""  id="calculator" onsubmit="fn1()">
            Maths
            <p>
            <input id="math" type = "text" name = "APS Maths"><br>
            </p>
            English
            <p>
            <input id="english" type = "text" name = "APS English"><br>
            <br>
                <button id = "btn1"> Click Me</button>



            </p>
            </form>
        </div>
        </div>
    </div>

​

附言:并且不要两次调用你的函数fn1()。

现在你在表单提交上调用它一次，当按钮被点击的时候，它会触发两次，我们不想要这样。

票数 0
EN

Stack Overflow用户

发布于 2019-06-02 04:37:20

除了提到的其他问题外，还可以使用CSS选择器来查找所选的无线电：

​

代码语言：javascript
复制
var a = document.querySelector("input[name='APS Maths']:checked");
var b = document.querySelector("input[name='APS English']:checked");

if (a && b)
  document.write( (+a.value + +b.value) / 2 )
代码语言：javascript
复制
<input type="radio" name="APS Maths" value="8">8
<input type="radio" name="APS Maths" value="7" checked>7
<input type="radio" name="APS Maths" value="6">6
<br>
<input type="radio" name="APS English" value="4">4
<input type="radio" name="APS English" value="3" checked>3
<input type="radio" name="APS English" value="2">2
<br>
Average:

​

票数 0
EN

Stack Overflow用户

发布于 2019-06-02 18:33:00

在前面的回复中，您已经指出了代码中的一些缺点，所以我不会做同样的事情。我也许能为你的问题找到解决方案。下面是我的代码，我该怎么做呢？

​

代码语言：javascript
复制
function fn1() {
        var m = document.getElementsByName("APS Maths");
        var e = document.getElementsByName("APS English");
        var avg = 0;

        avg += getAvg(m);
        avg += getAvg(e);

        alert(avg / 2);
    }

    function getAvg(arg) {
        for (var i = 0; i < arg.length; i++) {
            if (arg[i].checked) {
                return parseInt(arg[i].value, 10);
            }
        }
    }
代码语言：javascript
复制
<div class="container">
    <div class="row">
        <div style="text-align:center">
            APS Calculator
            <form action="">
                Maths
                <p>
                    <input type="radio" name="APS Maths" value="9" />9<br>
                    <input type="radio" name="APS Maths" value="8" />8<br>
                    <input type="radio" name="APS Maths" value="7" />7<br>
                    <input type="radio" name="APS Maths" value="6" />6<br>
                    <input type="radio" name="APS Maths" value="5" />5<br>
                    <input type="radio" name="APS Maths" value="4" />4<br>
                    <input type="radio" name="APS Maths" value="3" />3<br>
                    <input type="radio" name="APS Maths" value="2" />2<br>
                    <input type="radio" name="APS Maths" value="1" />1<br>
                    <input type="radio" name="APS Maths" value="0" />0<br>
                </p>
                English
                <p>
                    <input type="radio" name="APS English" value="9" />9<br>
                    <input type="radio" name="APS English" value="8" />8<br>
                    <input type="radio" name="APS English" value="7" />7<br>
                    <input type="radio" name="APS English" value="6" />6<br>
                    <input type="radio" name="APS English" value="5" />5<br>
                    <input type="radio" name="APS English" value="4" />4<br>
                    <input type="radio" name="APS English" value="3" />3<br>
                    <input type="radio" name="APS English" value="2" />2<br>
                    <input type="radio" name="APS English" value="1" />1<br>
                    <input type="radio" name="APS English" value="0" />0<br>

                    <br>
                    <button onclick="fn1()" id="btn1"> Click Me</button>
                </p>
            </form>
        </div>
    </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56409199

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档