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函數中顯示正確的答案

回答

相關問題