Question

我正在学习coffeescript，我想制作一个脚本，将我输入的数字乘以PI。问题在于如何将HTML5输入到coffeescript代码（实际上，在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代码？如果可能的话，给我coffeescript代码而不是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>

Answer 1

你几乎已经完成了它，但是：

在定义Coffee后，似乎没有理由直接调用function Coffee() { var x; x = y * Math.PI; alert(x); }，因此您可以删除该位：
```
<input>
```
该函数需要从function Coffee() { var x; x = document.querySelectorAll('input[name="input"]')[0].value * Math.PI; alert(x); }字段中获取值。使用像jQuery这样的库来获取对该字段的引用更加可靠，但我将使用本机函数给出一个示例（它不会在所有浏览器中都可用）：
```
<input>
```
可能值得为该字段提供更具描述性的名称。
您可能希望在new元素之前的页面中包含脚本，否则理论上用户可以在定义函数之前单击按钮。
在JavaScript中，只有构造函数（即那些打算用function coffee()关键字调用的函数）的大小应该是大写的惯例。所以{{1}}可能是更好的选择。

如何将HTML输入框中的值转换为CoffeeScript函数？

1 个答案: