我正在尝试创建 6 个文本框，前 3 个用作输入，后 3 个用作输出。三个输入文本框读取 3 个数字。 单击"计算"按钮时，应计算 3 个输入数字的最大值、最小值和平均值，并将其显示在带有相应标签的文本框中。我的代码不起作用有什么原因吗？
function maximum() //find the max
{
var max;
if (document.getElementsByTagName("input")[0].value > document.getElementsByTagName("input")[1].value && document.getElementsByTagName("input")[0].value > document.getElementsByTagName("input")[2].value) {
max = document.getElementsByTagName("input")[0].value;
} else if (document.getElementsByTagName("input")[1].value > document.getElementsByTagName("input")[0].value && document.getElementsByTagName("input")[1].value > document.getElementsByTagName("input")[2].value) {
max = document.getElementsByTagName("input")[1].value;
} else {
max = document.getElementsByTagName("input")[2].value;
}
document.getElementsByTagName("output")[0] = max;
//alert(maximumDemo.innerHTML);
}
function average() //find the average
{
var total = 3;
var i, aver;
aver = (document.getElementsByTagName("input")[0].value + (document.getElementsByTagName("input")[1].value + (document.getElementsByTagName("input")[2].value))) / total;
document.getElementsByTagName("output")[1] = aver;
}
function minimum() {
if (document.getElementsByTagName("input")[0].value < document.getElementsByTagName("input")[1].value && document.getElementsByTagName("input")[0].value < document.getElementsByTagName("input")[2].value) {
min = document.getElementsByTagName("input")[0].value;
} else if (document.getElementsByTagName("input")[1].value < document.getElementsByTagName("input")[0].value && document.getElementsByTagName("input")[1].value < document.getElementsByTagName("input")[2].value) {
min = document.getElementsByTagName("input")[1].value;
} else {
min = document.getElementsByTagName("input")[2].value;
}
document.getElementsByTagName("output")[2] = min; //find the minimum
//alert(minimumDemo.innerHTML);
}<form>
Number 1: <input type="text" name="num1"> <br> Number 2: <input type="text" name="num2"> <br> Number 3: <input type="text" name="num3"> <br> Maximum: <output type="text" name="max"></output> <br>
<!--preferably in textbox form-->
Average: <output type="text" name="avg"></output> <br>
<!--preferably in textbox form-->
Minimum: <output type="text" name="min"></output> <br>
<!--preferably in textbox form-->
<br><br>
</form>
<button onCLick="maximum();average();minimum();">Calculate</button>你有几个问题，但最大的问题是你试图将output元素本身设置为数学问题的答案，而不是将元素的.textContent设置为数学问题的答案。
现在，既然你刚刚学习所有这些，让我们在它们成为一成不变之前改掉一些坏习惯。毫无疑问，你已经从你看到其他人使用的东西中复制了你的大部分代码，不幸的是，网络上的大多数代码都是以这种方式创建的，而不是由真正理解他们所写内容的人创建的。
考虑到这一点...
不要通过 HTML 事件属性(即onclick、onmouseover等)。这是一种 25+ 年前的技术，我们在拥有现代标准和最佳实践之前就使用了它，因为它易于使用，人们一直在使用它。但是有很多原因可以解释为什么你不应该使用这种技术，而是将你的JavaScript与HTML分开。相反，保持你的JavaScript独立，并使用.addEventListener()将你的元素连接到它们各自的回调函数。
只需获取一次元素引用，而不是每次运行函数时，因为扫描文档中的元素需要时间和资源。没有理由一遍又一遍地扫描相同的元素。
与此相关。小心.getElementsByTagName()，因为它返回一个"活动节点列表"，这意味着它必须重新扫描文档以确保其列表保持最新。这在性能方面可能是非常浪费的。相反，.getElementById()、.querySelector()和.querySelectorAll()可能是扫描单个元素或元素组的最常见方法。
output元素没有 HTMLtype属性。input和button元素允许设置type。output纯粹是一个语义元素，出于所有意图和目的，在功能上与span元素没有太大区别。这只是浏览器知道它将包含页面设计者认为是某种输出的内容的一种方式，来自任何地方。任何桌面版本的 IE 也不支持它(如果这对您很重要)。你使用它很好，但我认为你误解了它的使用方式。
您的解决方案中确实不需要任何if/then代码，因为 JavaScript 有一个内置的Math对象，该对象具有.max和.min方法，这些方法完全可以执行您正在尝试的操作。
请记住，HTML中的"T"代表"文本"。无论您认为在表单字段中输入什么内容，它都会作为文本进行处理，当 JavaScript 获得该值时，它也将其作为文本处理。而且，在 JavaScript 中，+运算符可以表示字符串连接，也可以表示数学加法。它执行哪一个取决于操作数是什么。如果其中一个操作数是字符串，则完成字符串连接。因此，您需要先将input元素中的数据转换为数字，然后再对其进行任何数学运算。这可以通过多种方式(隐式和显式)完成，但一种简单的方法是在可转换为数字的字符串前面加上一个+运算符，您将在下面的平均代码中看到这一点。
最后(这不会导致你的代码不起作用，但你应该知道)，每个HTML文档必须在<body>之前有一个<head>部分，<head>部分必须有一个非空的<title>元素，文档才能被视为有效。浏览器不验证 HTML，它们只是跳过它们不理解的 HTML。这意味着您很可能在浏览器中拥有一个"适合"您的网页，但在技术上不正确。始终http://validator.w3.org验证您的 HTML 以确保其正确无误。
<!doctype html>
<html>
<head>
<title>Basic JavaScript 101</title>
</head>
<body>
<form>
Number 1: <input type="text" name="num1"> <br>
Number 2: <input type="text" name="num2"> <br>
Number 3: <input type="text" name="num3"> <br>
Maximum: <output id="max"></output> <br> <!-- output should not be in input type elements -->
Average: <output id="avg"></output> <br> <!-- output should not be in input type elements -->
Minimum: <output id="min"></output> <br> <!-- output should not be in input type elements -->
<br><br>
</form>
<button type="button" id="calc">Calculate</button>
<script>
// Get references to the elements just once
var num1 = document.querySelector("[name='num1']");
var num2 = document.querySelector("[name='num2']");
var num3 = document.querySelector("[name='num3']");
var max = document.getElementById("max");
var avg = document.getElementById("avg");
var min = document.getElementById("min");
var btn = document.getElementById("calc");
// Set up your event handler(s) in JavaScript, not with HTML attributes
btn.addEventListener("click", function(){
maximum();
average();
minimum();
});
function maximum() {
// You can't just set an element to a value. You have to set the content of the
// element to a value. Also, JavaScript provides a built-in Math object that
// can get you the maximum number from a set of numbers. No if/then needed.
max.textContent = Math.max(num1.value, num2.value, num3.value);
}
function average() {
// Convert values to numbers and do math
avg.textContent = (+num1.value + +num1.value + +num3.value) / 3
}
function minimum() {
// You can't just set an element to a value. You have to set the content of the
// element to a value. Math can also get you the minimum number in a set:
min.textContent = Math.min(num1.value, num2.value, num3.value);
}
</script>
</body>
</html>对块使用<div>而不是<br>。向每个<output>添加一个id，以使用document.getElementById()访问它。
如果您想添加输入，该怎么办？
因此，使用 访问所有输入document.querySelectorAll("input[name^='nums']"). 现在，您可以添加输入，例如<input type="text" name="num4">等。使用它来处理所有计算。
例
var max = document.getElementById("max"),
avg = document.getElementById("avg"),
min = document.getElementById("min"),
result = document.getElementById("result");
result.addEventListener("click", function(e) {
e.preventDefault();
var inputs = document.querySelectorAll("input[name^='num']"),
numbers = [],
sum = 0,
l = inputs.length;
for (var i = 0; i < l; i += 1) {
var n = +inputs[i].value;
numbers.push(n);
total += n;
}
max.textContent = Math.max(...numbers);
avg.textContent = (total / l).toFixed(2);
min.textContent = Math.min(...numbers);
});<form>
<div><label>Number 1:</label><input type="text" name="num1"></div>
<div><label>Number 2:</label><input type="text" name="num2"></div>
<div><label>Number 3:</label><input type="text" name="num3"></div>
<div>
<label>Maximum:</label><output type="text" name="max" id="max"></output>
</div>
<div><label>Average:</label><output type="text" name="avg" id="avg"></output></div>
<div>
<label>Minimum:</label>
<output type="text" name="min" id="min"></output>
</div>
<button id="result">Calculate</button>
</form>这个答案是为了补充斯科特·马库斯的答案。他提出了一些很好的观点并提供了详细的解释，但我认为程序演示可以显着改进 -
const f = document.querySelector("form") // <-- single DOM query
const max = Math.max //
const min = Math.min // <-- functions take args
const avg = (a, b, c) => (a + b + c) / 3 //
const calc = function()
{ const x = Number(f.num1.value) || 0 //
const y = Number(f.num2.value) || 0 // <-- parsing w/ Number
const z = Number(f.num3.value) || 0 //
f.max.value = max(x, y, z) //
f.avg.value = avg(x, y, z) // <-- functions return values
f.min.value = min(x, y, z) //
}
f.calc.addEventListener("click", calc)<form>
Number 1: <input type="number" name="num1"><br>
Number 2: <input type="number" name="num2"><br>
Number 3: <input type="number" name="num3"><br>
<br>
Maximum: <output name="max"></output><br>
Average: <output name="avg"></output><br>
Minimum: <output name="min"></output><br>
<br>
<button type="button" name="calc">Calculate</button>
</form>注意，我们可以通过它们的name属性直接引用表单子元素，例如f.num1或f.min。请注意，id属性甚至没有声明。这也使我们不必为每个输入和输出编写document.querySelector。
运行代码段以查看其行为方式。以下是一些额外的改进 -
const max = Math.max
const min = Math.min
const avg = (a, b, c) => (a + b + c) / 3
const getNumber = (elem) => Number(elem.value) || 0 // <-- make functions to
const set = (elem, x) => elem.value = x // <-- avoid repetition
const calc = function(form) // form is an input, no longer global
{ const x = getNumber(form.num1) //
const y = getNumber(form.num2) // <-- use getNumber helper
const z = getNumber(form.num3) //
set(form.max, max(x, y, z)) //
set(form.avg, avg(x, y, z)) // <-- use set helper
set(form.min, min(x, y, z)) //
}
const f = document.querySelector("form") // <-- single DOM query
f.addEventListener("input", event => calc(f)) // <-- listen to input event<form>
Number 1: <input type="number" name="num1"><br>
Number 2: <input type="number" name="num2"><br>
Number 3: <input type="number" name="num3"><br>
<br>
Maximum: <output name="max"></output><br>
Average: <output name="avg"></output><br>
Minimum: <output name="min"></output><br>
</form>