试图找到梯形的体积

问题描述

我还是编码的新手，仍在尝试不同的形式。我已经能够使用提示来计算梯形的体积，但是现在我希望使用可见的输入和按钮来达到相同的效果，并且代码会不断输出NaN，所以我想知道是否有人可以发现我正在做的事情在这里错了，有什么帮助！

<h1>Trapazoid Calculator</h1>
<br>

<br>
<label>Length</label>
<br>
<input id="Length" type="number" onchange="Trapazoid()" value=7>

<br>
<label>Height</label>
<br>
<input id="Height" type="number" onchange="Trapazoid()" value=7>

<br>
<label>Width</label>
<br>
<input id="Width" type="number" onchange="Trapazoid()" value=7>

<br>
<label>Top</label>
<br>
<input id="Top" type="number" onchange="Trapazoid()" value=7>

<br>
<br>
<input type = "button" id="button1" value="Calculate" onclick = "calculateTrapazoid()"/>
<input type = "reset" value="Clear" />



    <script>

        function calculateTrapazoid(){
        //retrieve elements
        var Length = document.getElementById("Length");
        var Height = document.getElementById("Height");
        var Width = document.getElementById("Width");
        var Top = document.getElementById("Top")

        //float elements?
        Length = parseFloat(Length);
        Height = parseFloat(Height);
        Width = parseFloat(Width);
        Top = parseFloat(Top);

        //formula
        var Volume = (Length)*(Height)*((Width+Top)*.5); 

        //output
        document.write("<p>The Volume is : "+Volume+"</p>");

        }
    </script>

解决方法

document.getElementById("Length")返回html DOM对象

document.getElementById("Length").value返回DOM对象中包含的值，这就是您要执行的操作

有关getElementById和DOM https://www.w3schools.com/jsref/met_document_getelementbyid.asp

的更多信息

这是下面代码的有效提要（以防链接无法正常工作）。 https://jsfiddle.net/g43u9x7h/

<div>

<label>Data</label>
<br>
<input id="Top" type="number" onchange="Trapazoid()" placeholder='Top'>
<input id="Height" type="number" onchange="Trapazoid()" placeholder='Height'>
<input id="Width" type="number" onchange="Trapazoid()" placeholder='Width'>
<input id="Length" type="number" onchange="Trapazoid()"  placeholder='Length'>
<br>
<br>
<input type = "button" id="button1" value="Calculate" onclick = "calculateTrapazoid()"/>
<input type = "reset" value="Clear" />
</div>

    <script>

        function calculateTrapazoid(){
        //retrieve elements
        var Length = document.getElementById("Length").value;
        var Height = document.getElementById("Height").value;
        var Width = document.getElementById("Width").value;
        var Top = document.getElementById("Top").value
        console.log(Length,typeof Length)

        //float elements?
        Length = parseFloat(Length);
        Height = parseFloat(Height);
        Width = parseFloat(Width);
        Top = parseFloat(Top);

        //formula
        console.log(Length,typeof Length)
        var Volume = (Length)*(Height)*((Width+Top)*.5); 

        //output
        document.write("<p>The Volume is : "+Volume+"</p>");

        }
    </script>