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

我做了一个html文档，计算在我的html文档的高度，宽度和长度的输入框中输入的任何东西的表面积和体积。我不想使用按钮来运行函数，而是在指定为表面区域和体积的输入框中显示答案，我希望使用onload并在每个输入框被更改时都使用这两个函数。我对Javascript很陌生，下面我试过的方法只是将屏幕留空，究竟是什么导致答案不能显示在文本框中？我该如何解决这个问题？onChange不能在我的onLoad函数中显示正确的答案

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

来源

2017-10-15 conner.maxey

首先，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

来源

2017-10-15 21:47:18 tfogo

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

回答

相关问题