从输入字段获取数值并使用它们来计算梯形的表面积

时间:2013-08-27 19:20:14

标签: javascript

我是Javascript的新手,如果有人帮助我理解我做错了什么,我将感激不尽。我试图通过从输入字段获取值来计算梯形的表面积。当我按下“计算S”按钮时,我得到一个“楠”作为答案。 这是HTML代码的主要部分:

    <form method="post">
    <label for="a">a</label>
    <input type="text" id="a"/> <br/>
    <label for="b">b</label>
    <input type="text" id="b"/> <br/>
    <label for="h">h</label>
    <input type="text" id="h"/> <br/>
    <button onclick="alert(S)">Calculate S</button>
    </form>

这是我用来获取值并计算表面的脚本:

           <script type="text/javascript">
            var a=parseInt(document.getElementById("a"), 10);
            var b=parseInt(document.getElementById("b"), 10);
            var h=parseInt(document.getElementById("h"), 10);
            var S=parseInt(((a+b)/2)*h, 10);
        </script>

提前致谢!

2 个答案:

答案 0 :(得分:2)

您需要从每个输入中获取值,而不仅仅是输入,如下所示:

       <script type="text/javascript">
        var a=parseInt(document.getElementById("a").value, 10);
        var b=parseInt(document.getElementById("b").value, 10);
        var h=parseInt(document.getElementById("h").value, 10);
        var S=((a+b)/2)*h;
    </script>

答案 1 :(得分:1)

  1. 在输入元素上使用.value属性来获取其内容。然后在 上拨打parseInt以获取号码。
  2. 也不需要parseInt结果。
    var S = ((a + b) / 2) * h;
  3. 如果您希望在按钮单击时执行代码,则将代码包装在可调用函数中(当您的浏览器解析代码时,您现在将执行该代码)。
  4. 此处的示例:http://jsfiddle.net/bpwEh/

    更新的代码:

    <head>
        <!-- ... -->
        <script>
            function calc(){
                var a=parseInt(document.getElementById("a").value, 10);
                var b=parseInt(document.getElementById("b").value, 10);
                var h=parseInt(document.getElementById("h").value, 10);
                return ((a+b)/2)*h, 10;
            }
         </script>
    </head>
    <body>
        <form method="post">
            <label for="a">a</label>
            <input type="text" id="a"/> <br/>
            <label for="b">b</label>
            <input type="text" id="b"/> <br/>
            <label for="h">h</label>
            <input type="text" id="h"/> <br/>
            <button onclick="alert(calc()); return false;">Calculate S</button>
        </form>
    </body>