javascript - 如何在 HTML 中显示 JavaScript 函数的结果？

Question

我正在编写一个程序来根据用户输入显示成绩。但是，当我正确输入所有内容后按“提交”时，没有任何反应。我认为我的 onclick 函数不正确。另外，如何在 HTML 页面上显示用户输入的内容？谢谢。编辑:谢谢您的所有回复。绝对帮助了我。

 <form name="form1">
<p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>

<p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Midterm Exam: </b><input type="number" id="assign5" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Exam: </b><input type="number" id="assign6" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Project:</b><input type="number" id="assign7" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>

<p>
<button onclick = "getElementById('average').value=calculator(getElementById('average').value)">Submit</button>
<input type="reset" value="Reset">

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


<script type="text/javascript">

    function calculator()
    {
        var grade1=parseFloat(document.getElementById('assign1').value*1);
        var grade2=parseFloat(document.getElementById('assign2').value*1);
        var grade3=parseFloat(document.getElementById('assign3').value*1);
        var grade4=parseFloat(document.getElementById('assign4').value*1);
        var grade5=parseFloat(document.getElementById('midterm').value*1);
        var grade6=parseFloat(document.getElementById('final').value*1);
        var grade7=parseFloat(document.getElementById('project').value*1);
        var total=grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
        var average = total / 4


    }



</script>

Answer 1

添加<div id="average"> </div>在要显示结果的 HTML 中，然后更改如下代码

<button onclick = "calculator()">Submit</button>

<script type="text/javascript">

    function calculator()
    {
        var grade1=parseFloat(document.getElementById('assign1').value*1);
        var grade2=parseFloat(document.getElementById('assign2').value*1);
        var grade3=parseFloat(document.getElementById('assign3').value*1);
        var grade4=parseFloat(document.getElementById('assign4').value*1);
        var grade5=parseFloat(document.getElementById('midterm').value*1);
        var grade6=parseFloat(document.getElementById('final').value*1);
        var grade7=parseFloat(document.getElementById('project').value*1);
        var total=grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
        var average = total / 4
        // add average value to the average element 
        document.getElementById('average').innerHTML = average;

    }



</script>