Question

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

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

<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>

每当我选择两个单选按钮后单击按钮，输出就会显示为“您的APS为：NaN”或根本没有输出。我可以找到一种方法来基于单击的按钮来输出平均值吗？

这是JavaScript代码：

<script type="text/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;   
    }
    
</script>

谢谢您的帮助。

Answer 1

所以这里有很多问题：

首次-使用单选按钮执行此操作确实不是很酷（让我们这样说吧）
第二：您不能拥有未关闭的onsubmit="fn1 ()属性。必须为onsubmit="fn1 ()"，结尾为"。
接下来的事情是，您不能仅使用document.getElementsByName('APS English')访问选定的单选按钮，因为这将为您提供name="APS English"的所有元素-这也是为什么我建议摆脱单选按钮。单选按钮没有任何活动状态或任何一种活动状态，因此您可以在js中访问它们，除非每当它们更改时都对每个按钮设置一个属性。我宁愿做这样的事情：

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);
}

<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>

P.S .：不要两次调用函数fn1()。

现在您在表单提交上调用一次，单击按钮一次，它将触发两次，我们不希望这样。

Answer 2

除了提到的其他问题，CSS选择器还可用于查找选定的收音机：

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 )

<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:

Answer 3

在以前的答复中，您已指出代码中的一些缺点，因此我不会这样做。我也许找到了解决您问题的方法。下面是我的代码，我该怎么做。

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);
            }
        }
    }

<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>

有没有一种方法可以使用JS代码来计算平均值？

3 个答案: