Question

我制作了一个html文档，计算在我的html文档高度，宽度和长度中输入到输入框中的任何内容的表面积和体积。而不是使用按钮来运行函数并使答案出现在指定为表面区域和体积的输入框中以获得答案，我想使用onload，并且每当更改每个输入框时都将其设置为运行。我对Javascript相当新，我在下面尝试的方法只是将屏幕留空，究竟是什么导致答案不显示在文本框中？我怎么解决这个问题？

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Surface Area &amp; 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>

Answer 1

首先，output实际上并未调用calculateVolume或calculateSurfaceArea。它只是定义它们。因此，每次更改输入时，您只需重新定义某些功能，而不是实际运行任何功能。

其次，您需要将输入值传递给这些函数。 var length = $("length");获取整个元素。它应该变为var length = $("length").value;以获得实际数值。

最后，您可能需要在output()中拨打onload一次，以便在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

onChange不能在我的onLoad函数中工作以显示正确的答案

1 个答案: