以英尺为单位的高度/长度生成器？答案

【问题标题】：Height/Length generator in feet?以英尺为单位的高度/长度生成器？
【发布时间】：2013-02-14 01:42:29
【问题描述】：

我目前有这段代码，用于确定给定长度的高度和翼展。我真的很希望将结果输入为英尺和英寸的测量值，以及由此产生的翼展和高度在相同的测量值中做出响应。我不介意它是否使用撇号或句号。

<SCRIPT LANGUAGE="LiveScript">
    function wings(form) {
        form.wingspan.value = (form.length.value * .75) * 2
        form.height.value = form.length.value * .5
    }
</SCRIPT>

<TABLE>
    <TR>
        <TD>Dragon Length:</TD>
        <TD><INPUT TYPE="text" NAME="length" SIZE=15 /></TD>
    </TR>
    <TR>
        <TD>Dragon Wingspan:</TD>
        <TD><INPUT TYPE="text" NAME="wingspan" SIZE=15 /></TD>
    </TR>
    <TR>
        <TD>Dragon Height:</TD>
        <TD><INPUT TYPE="text" NAME="height" SIZE=15 /></TD>
    </TR>
    <TR>
        <TD><INPUT TYPE="button" VALUE="Calculate" ONCLICK="wings(this.form)" /></TD>
    </TR>
</TABLE>

</FORM>

【问题讨论】：

您的代码无效，我对其进行了编辑并添加了 2 个缺失 <TR>

标签： javascript html generator

【解决方案1】：

您是否在浏览器中加载此内容？

如果是，那么 LiveScript 在大多数情况下都不会运行。您可能希望改用 Javascript 或 JQuery 进行编程。

这是一个帮助您入门的 sn-p，内联 cmets 用于解释。请注意，我实际上并没有为您计算任何东西...您应该尝试自己进行练习：

<!DOCTYPE html>
<html>
<head>
    <!-- You need this line so you can load the JQuery functions that you will be using -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<form id="wings">
<TABLE>
<TR><TD>Dragon Length:</TD><TD>
    <INPUT TYPE ="text" id="winglength" SIZE=15</TD></TR>
</TABLE>
</form>

<!-- ID of this element is called "trigger" and will be used for clicking -->
<div id="trigger">Click me to calculate the Wingspan and Height!</div>

<!-- This div tag is called "wingspan" -->
<div id="wingspan">Wingspan is: </div>

<!-- Can you write the HTML code for "height" here? -->

<script>

    // Everything in here will run when your page is loaded
    $(document).ready(function() {

        // When you click on the DIV tag called "trigger", you run this cod below.
        $("#trigger").click(function() {

            // "append" the wing length to the HTML tag above: the # refers to id called winglength
            $("#wingspan").append($("#winglength").val());

            // How you calculate the "height" is left as an exercise for the original poaster!
        });
    });
</script>

</body>
</html>

【讨论】：

我在论坛上运行它，所以它只是插入其中一个帖子。我不确定这是否会改变任何事情——正如我所说，我是个新手。
什么论坛？它可能会影响一些事情 - 许多论坛不允许您在它们上运行代码。
简单机器；您可以在link 中看到上面和另一个。不过，它们不会读出英尺和英寸，这就是我所追求的:)
您是否编写了这些示例中链接的帖子？正如我所提到的，许多论坛不允许您在其上编写代码。您可能想与论坛管理员交谈，并询问他们有关您可以编写哪些表格的详细信息。（旁注：很多很多年前，我曾经扮演过珀恩的龙骑士。;））
我是论坛的管理员，这些帖子是我的。管理员是唯一有能力发布 HTML 的人，因为搞砸它会杀死董事会。：）甜的！ Pern 是最好的 XD

【解决方案2】：

没有插件或库，这是您的示例工作...

看看这个例子：http://jsfiddle.net/BtC4K/

Javascript：

function wings(){
    var lenght = document.getElementsByName("length")[0];
    var wingspan = document.getElementsByName("wingspan")[0];
    var height = document.getElementsByName("height")[0];

    wingspan.value = (lenght.value * 0.75) * 2;
    height.value = lenght.value * 0.5;
}

HTML：

<table>
    <tr>
        <td>Dragon Length:</td>
        <td><input type="text" name="length" SIZE=15 /></td>
    </tr>
    <tr>
        <td>Dragon Wingspan:</td>
        <td><input type="text" name="wingspan" SIZE=15 readonly /></td>
    </tr>
    <tr>
        <td>Dragon Height:</td>
        <td><input type="text" name="height" SIZE=15 readonly /></td>
    </tr>
    <tr>
        <td><button onclick="wings()">Calculate</button></td>
    </tr>
</table>

【讨论】：