我制作了一个 html 文档，用于计算在我的高度、宽度和长度 html 文档的输入框中输入的任何内容的表面积和体积。我不想使用按钮来运行函数并使答案出现在指定为表面积和体积的输入框中，而是使用 onload 并使其在每个输入框更改时都运行两个函数。我是 Javascript 的新手，我在下面尝试的方法只是让屏幕空白，到底是什么导致答案不显示在文本框中？我该如何解决这个问题？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Surface Area & Volume</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<script>
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var amountVolume = 0;
var length = $("length");
var width = $("widthData");
var height = $("heightData");
var surfaceArea;
var surfaceAreaArray = [];
function output() {
function calculateVolume(length, width, height) {
amountVolume = parseFloat(length) * parseFloat(width) * parseFloat(height);
var volumeRound = amountVolume.toFixed(2);
$('volume').value = volumeRound;
}
function calculateSurfaceArea(length, width, height) {
surfaceAreaArray[0] = parseFloat(length) * parseFloat(width) * 2;
surfaceAreaArray[1] = parseFloat(length) * parseFloat(height) * 2;
surfaceAreaArray[2] = parseFloat(height) * parseFloat(width) * 2;
surfaceArea = surfaceAreaArray[0] + surfaceAreaArray[1] + surfaceAreaArray[2];
var areaRound = surfaceArea.toFixed(1);
$('area').value = areaRound;
}
}
window.onload = function() {
$("length").onchange = output;
$("widthData").onchange = output;
$("heightData").onchange = output;
}
</script>
<div id="wrapper">
<form>
<h1>Surface Area & Volume</h1>
<p>Length:
<input type="text" id="length" value="0"/>
</p>
<br />
<p>Width:
<input type="text" id="widthData" value="0"/>
</p>
<br />
<p>Height:
<input type="text" id="heightData" value="0"/>
</p>
<br />
<p class="change">Surface Area:
<input type="text" id="area" disabled="disabled" />
</p>
<br />
<p class="volume">Volume:
<input type="text" id="volume" disabled="disabled" />
</p>
<br />
</form>
</div>
</body>
</html>
最佳答案
首先，output 实际上并没有调用 calculateVolume 或 calculateSurfaceArea。它只是定义它们。因此，每次您更改输入时，您只是在重新定义一些函数，而不是实际运行任何东西。
其次，您需要将输入值传递给这些函数。 var length = $("length"); 获取整个元素。它应该变为 var length = $("length").value; 以获得实际数值。
最后，您可能希望在 onload 中调用一次 output() 以从 0 开始关闭表面积和体积场。
这段代码应该可以工作:
var $ = function(id) {
return document.getElementById(id);
};
function calculateVolume(length, width, height) {
var amountVolume = parseFloat(length) * parseFloat(width) * parseFloat(height);
var volumeRound = amountVolume.toFixed(2);
$('volume').value = volumeRound;
}
function calculateSurfaceArea(length, width, height) {
var surfaceAreaArray = [];
surfaceAreaArray[0] = parseFloat(length) * parseFloat(width) * 2;
surfaceAreaArray[1] = parseFloat(length) * parseFloat(height) * 2;
surfaceAreaArray[2] = parseFloat(height) * parseFloat(width) * 2;
var surfaceArea = surfaceAreaArray[0] + surfaceAreaArray[1] + surfaceAreaArray[2];
var areaRound = surfaceArea.toFixed(1);
$('area').value = areaRound;
}
function output() {
var length = $("length").value;
var width = $("widthData").value;
var height = $("heightData").value;
calculateVolume(length, width, height)
calculateSurfaceArea(length, width, height)
}
window.onload = function() {
$("length").onchange = output;
$("widthData").onchange = output;
$("heightData").onchange = output;
output();
}
您说您是 JavaScript 新手。您应该仔细阅读上面的代码，以确保您了解其工作原理。这里有一个很好的函数介绍，您可能会觉得有用:http://eloquentjavascript.net/03_functions.html
关于javascript - onChange 在我的 onLoad 函数中无法显示正确答案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46760192/