Question

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

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

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

Answer 1

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

Answer 2

平均值必须如下计算：

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

您对averesult()的来电需要更改为average()

Javascript表单不返回值

2 个答案: