我正在编写一个程序来根据用户输入显示成绩。但是，当我正确输入所有输入后按“提交”时，没有任何反应。我认为我的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>
答案 0 :(得分：1)
在要显示结果的HTML中添加<div id="average"> </div>，然后按如下所示更改代码
<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>
答案 1 :(得分：0)
您的代码中有许多错误。这是以下工作，但首先：
onsubmit）以防止页面重新加载。onsubmit中调用显示功能，而不是在单击按钮期间calculator()函数应return平均值innerHTML=variable <div id="average"></div>丢失id=""
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;
return average;
}
function displayResult() {
var result = calculator();
document.getElementById('average').innerHTML = result;
return false;
}<form name="form1" onsubmit="event.preventDefault();return displayResult();">
<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="midterm" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>
<p><b>Final Exam: </b><input type="number" id="final" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>
<p><b>Final Project:</b><input type="number" id="project" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>
<p>
<button>Submit</button>
<input type="reset" value="Reset">
</p>
</form>
<div id="average"></div>
下次，请尝试自行调试。您需要隔离问题并从那里进行调试。
如果您遇到问题，请提供明确说明Minimal, Complete, and Verifiable example不起作用的地方。我建议阅读How to Ask a good question。另外，请确保take the tour
答案 2 :(得分：0)
有几件事要解决。
1）您应该减少对内联JS的使用。最好的做法是将JS分离到一个单独的文件中，然后在DOM加载后将事件侦听器添加到DOM中。
2）如果您需要在表单上做一些工作（例如JavaScript验证），请在单击“提交”按钮后进行操作，那么您需要阻止表单的提交。这可以通过preventDefault来实现。
3）您可以通过选择所有输入并对其进行迭代来简化计算例程。您可以使用简单的for/loop或类似reduce之类的功能。这样，您就可以摆脱输入ID。
4）您需要一个元素，您可以在其中放置HTML中缺少的计算输出。
在此示例中，我一直在处理/缩短您的代码。希望对您有所帮助。
// pick up the form, input, and output elements
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input[type="number"]');
const output = document.querySelector('.output');
// add an submit listener to the form that calls `handleSubmit`
form.addEventListener('submit', handleSubmit, false);
function handleSubmit(e) {
// prevent the form from submitting
e.preventDefault();
// loop over the inputs and add their values to the total
let total = 0;
for (let i = 0; i < inputs.length; i++) {
total += Number(inputs[i].value);
}
// calculate the total
const avg = total / inputs.length;
// add the total and average to the text content of the output element
output.textContent = `Total: ${total}, Avg: ${avg}`;
}label { display: block; }
input { margin-left: 5px; }<form name="form1">
<label>Assignment 1<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
<label>Assignment 2<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
<label>Assignment 3<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
<label>Assignment 4<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
<button class="submit">Submit</button>
<div class="output"></div>
</form>
答案 3 :(得分：0)
Wilson Lin欢迎，
一个简单的解决方法是：
function calculator() {
var average = 0;
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('assign5').value * 1);
var grade6 = parseFloat(document.getElementById('assign6').value * 1);
var grade7 = parseFloat(document.getElementById('assign7').value * 1);
var total = grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
average = total / 7;
if (average > 0) {
document.getElementById('lblGrade').innerHTML = 'Your Final Grade = ' + average;
}
}<form>
<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>
<!-- You had the incorrect id names from here and below -->
<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>
<!-- Be sure to return false; The return false prevents the page from being navigated and unwanted scrolling of a window to the top or bottom. -->
<button onclick="calculator(); return false;">Submit</button>
<input type="reset" value="Reset ">
</p>
<p>
<label id="lblGrade"/>
</p>
</form>