1

我正在学习coffeescript，我想制作一个将我输入的数字乘以PI的脚本。问题在于如何获取咖啡脚本代码的 HTML5 输入（实际上，在 HTML 文件中它现在是 javascript）。

编译前的 Coffeescript：

x = y * Math.PI;
alert(x);

HTML5：

<html>
    <head><title>Coffeescript Test</title></head>
    <body>
        <form action="" method="GET">
    <input type="text" name="input" value="NUMBER">
    <input type="button" name="Solve" value="Equals" onClick="Coffee()">
    <span id="result" />
        </form>

        <div id="Coffeescript">
            <script type="text/javascript">
(function Coffee() {
  var x;
  x = y * Math.PI;
  alert(x);
}).call(this);
</script>
        </div>
    </body>
</html>

变量“y”应该是输入。如何从 HTML 输入框中获取数字到新的 javascript 代码？如果可能的话，给我咖啡脚本代码而不是 javascript。

使用 Paul D. Waite 答案后的新代码（此代码运行良好）：

<html>
    <head><title>Coffeescript Test</title></head>
    <body>
        <div id="Coffeescript">
            <script type="text/javascript">
function coffee() {
  var x;
  x = document.querySelectorAll('input[name="pi_input"]')[0].value * Math.PI;
  alert(x);
}
            </script>
        </div>
<form action="" method="GET">
    <input type="text" name="pi_input" value="NUMBER">
    <input type="button" name="Solve" value="Solve" onClick="coffee()">
    <span id="result"/>
</form>
    </body>
</html>
4

1 回答 1

2

您几乎已经完成了，但是：

  1. 似乎没有理由Coffee在定义后直接调用，因此您可以删除该位：

    function Coffee() {
  var x;
  x = y * Math.PI;
  alert(x);
}

  2. 该函数将需要从<input>字段中获取值。使用 jQuery 之类的库获得对该字段的引用更可靠，但我将举一个使用本机函数的示例（并非在所有浏览器中都可用）：

    function Coffee() {
  var x;
  x = document.querySelectorAll('input[name="input"]')[0].value * Math.PI;
  alert(x);
}

    可能值得给该字段一个更具描述性的名称。

  3. 您可能希望将脚本包含在<input>元素之前的页面中，否则理论上用户可以在定义函数之前单击按钮。

  4. 在 JavaScript 中，有一个约定，即只有构造函数（即那些打算用new关键字调用的函数）的名称才应该大写。所以function coffee()可能是更好的选择。

于 2013-06-25T10:57:00.310 回答