Question

我正在尝试创建6个文本框，前三个用作输入，底部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>

Answer 1

您有几个问题，但最大的问题是您试图将output元素本身设置为数学问题的答案，而不是设置 {{3你的元素你的数学答案。

现在，既然你刚刚学习了所有这些，那么在它们陷入困境之前，让我们打破一些坏习惯。毫无疑问，你已经从你见过别人使用过的代码中复制了大部分代码，不幸的是，网络上的大多数代码都是以这种方式创建的，而不是那些真正了解他们所写内容的人。 / p>

考虑到这一点......

不要通过HTML事件属性设置事件处理程序（即onclick，onmouseover等）。这是我们在使用现代标准和最佳实践之前使用的25年以上的技术，并且因为它易于使用，人们继续使用它。但是 .textContent ，而是将您的JavaScript与HTML分开。相反，请将您的JavaScript分开，并使用 there are a variety of reasons why you should not use this technique 将您的元素连接到各自的回调函数。

只需获取元素引用，而不是每次运行函数时都是如此，因为扫描文档中的元素需要时间和资源。没有理由一遍又一遍地扫描相同的元素。

与此相关。 小心.addEventListener() ，因为它返回＆＃34;实时节点列表＆＃34;，这意味着它必须重新扫描文档以确保其列表保持最新状态日期。这在性能方面可能非常浪费。相反， .getElementsByTagName() ， .getElementById() 和 .querySelector() 应该是最常见的扫描方式个别元素或元素组。

output元素没有HTML type属性。 input和button元素允许设置type。 .querySelectorAll() 纯粹是一个语义元素，并且对于所有意图和目的而言，与span元素在功能上并没有那么多。它只是浏览器知道它将包含页面设计者认为某种输出的东西的方式。 IE的任何桌面版本也不支持它（如果这对您很重要）。你使用它很好，但我认为你误解了它是如何使用它的。

您真的不需要解决方案中的任何if/then代码，因为JavaScript内置了 output 对象，有 Math 和 .max 方法完全符合您的尝试。

请记住＆＃34; T＆＃34;在HTML中代表＆＃34;文字＆＃34; 。无论您认为自己进入表单字段，都会将其作为文本处理，当JavaScript获取该值时，它也会将其作为文本处理。并且，在JavaScript中，+运算符可以表示字符串连接，或者它可以表示数学加法。它的作用取决于操作数是什么。如果其中一个操作数是字符串，则完成字符串连接。因此，在对数据进行任何数学运算之前，需要将input元素中的数据转换为数字。这可以通过多种方式（隐式和显式）完成，但一种简单的方法是在可转换为数字的字符串前面添加+运算符，并且您将在我的字符串中看到它平均代码如下。

最后（并且这并不会导致您的代码无效，但您应该知道），每个HTML文档必须在<head>之前和{{<body>之前有<head>部分1}}部分必须在其中包含非空<title>元素才能使文档有效。浏览器不会验证HTML，他们只是跳过他们不理解的HTML。这意味着您可以很好地拥有一个“＃34;工作＆＃34;在您的浏览器中为您，但在技术上是不正确的。始终在 .min 验证您的HTML，以确保其正确无误。

＆＃13;

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

＆＃13;

Answer 2

使用<div>代替<br>来阻止。向id <output>添加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>

while max(fib) <= 100:

Answer 3

此答案旨在补充Scott Marcus的答案。他提出了一些要点并提供了详细的解释，但我认为该程序的演示可以大大改善-

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>

根据输入值计算最大值，最小值和平均值

3 个答案:

实施例