Javascript表单不返回值

Javascript Form Not Returning Values

本文关键字：返回值 表单 Javascript      更新时间：2023-09-26

它看起来不错，但没有返回任何值。有什么想法吗？

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.out {
    height: 22px;
    width: 100px;
    border:solid 1px;
    margin: 4px;
    padding: 3px;
    line-height: 22px;
}
form input {
    display: block;
}
</style>
</head>
<body>
<form>Number 1
    <input type="text" id="firstNumber">Number 2
    <input type="text" id="secondNumber">Number 3
    <input type="text" id="thirdNumber">
    <input type="button" value="Add Total" onclick="addIt()">
    <div class="out" id="Total"></div>
    <input type="button" value="Multiply Total" onclick="multiply()">
    <div class="out" id="multiplyresult"></div>
    <input type="button" value="Ave Total" onclick="averesult()">
    <div class="out" id="averesult"></div>
</form>
</body>
</html>
<script type="text/javascript">
var result = getId('Total'),
    multiplyresult = getId('multiplyresult'),
    n1, n2, n3;
function getValues() {
    n1 = getId('firstNumber').value, n2 = getId('secondNumber').value, n3 = getId('thirdNumber').value;
}
console.log((n1) * (n2) * (n3));
window.addIt = function() {
    getValues();
    result.innerText = (+n1) + (+n2) + (+n3);
};
window.multiply = function() {
    getValues();
    multiplyresult.innerText = (n1) * (n2) * (n3);
};
window.average = function() {
    getValues();
    averesult.innerText = (n1) + (n2) + (n3) / 3;
};
function getId(x) {
    return document.getElementById(x);
}
</script>

我还试图弄清楚如何返回和三个数字的平均值。但由于我是一个完全的新手，我不知道如何做到这一点。加法和乘法函数现在正在工作，但不是平均值。提前谢谢。

平均值必须这样计算：

window.average = function() {
    getValues();
    averesult.innerText = ((n1) + (n2) + (n3)) / 3; //Note brackets around n1->n3
};

您对averesult()的调用需要更改为average()

问题是，在加载页面后，在加载所有元素之前，您就立即运行了脚本。因此，您试图访问的元素还不存在，并且在页面加载完成之前不会存在。这可以通过两种方法中的一种来解决。第一种方法是将其包装在window.onload中，第二种方法只是将<script></script>标签移动到<body> 的末尾

相关文章：