1

私は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 コードに数値を取得するにはどうすればよいですか? 可能であれば、javascript の代わりに coffeescript コードを教えてください。

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 に答える