2

jsfiddle デモ

我慢してください、ここでは全くの初心者です。

Javascript の実験として、単純な乗算計算機を作成しようとしています。

キャッチはそれです -

  1. ライブラリはなく、純粋な JavaScript のみです。
  2. Javascript は目立たないようにする必要があります。

ここで問題が発生します。値が表示されないということです。

これをローカルで実行するとanswer、値がNaNになり、ヒットSubmitしてもそのままになりますが、戻るボタンを押すと、実際の結果が表示されます。

JSFiddle では、単に機能しないという事実を除けば、多くのことは示されていません。

教えてください、目立たない電卓を作ることさえ可能ですか? どのように？

（追伸。基本的な構文などを確認するために、 sciencebuddiesから少し助けてもらいましたが、目立たないコードなしでは実行できないことがわかりました）

4

3 に答える 3

5

おそらく始めたばかりで、何を含め、何を削除すればよいか分からないことは承知しています。ただし、ここでの良いアドバイスは、要素を理解できるように明確にラベルを付け、それを機能させるために必要な最小のコードに切り詰めることです (それを構築できるように、さらに少なくします)。

これがあなたのコードを作り直したものです：

HTML

<div>
    <input type="text" id="multiplicand" value="4">
    <input type="text" id="multiplier" value="10">
    <button type="button" id="multiply">Multiply</button>
</div>
<p id="result">
    The product is: <span id="product">&nbsp;</span>
</p>

Javascript

window.onload = function(){
    var button = el('multiply'),
        multiplicand = el('multiplicand'),
        multiplier = el('multiplier'),
        product = el('product');

    function el(id) {
        return document.getElementById(id);
    };

    function multiply() {
        var x = parseFloat(multiplicand.value) || 0,
            y = parseFloat(multiplier.value) || 0;

        product.innerHTML = x * y;
    }

    button.onclick = multiply;
};

http://jsfiddle.net/userdude/EptAN/6/

加算/減算/乗算/除算を使用した、もう少し洗練されたアプローチ:

http://jsfiddle.net/userdude/EptAN/9/

于 2012-08-18T15:11:10.230 に答える
1

あなたの例にはいくつかの問題があります：

  1. フォームは引き続き送信されます。JSが値を変更した後、送信するとページがリロードされ、回答値の設定で行った作業が無駄になります。
  2. あなたはすぐにこのようなことをしようとしています。ヘッダーでは、本文はまだ解析されていません（したがって、フォーム要素も存在しません）。ページが読み込まれるまで待ちます。
  3. スクリプトがハイジャックしwindow.onloadます。ページに他のスクリプトがない場合、それは問題ありません...しかし、控えめなJS（IMO）の要点は、スクリプトが存在するかどうかに関係なく、何も壊れないということです。

修正されました。次のようなものがあります。

// Wrap this onload in an IIFE that we pass the old onload to, so we can
// let it run too (rather than just replacing it)
(function(old_onload) {

  // attach this code to onload, so it'll run after everything exists
  window.onload = function(event) {

    // run the previous onload
    if (old_onload) old_onload.call(window, event);

    document.getElementById('Xintox').onsubmit = function() {
      var multiplier = +this.multiplier.value;
      var multiplicand = +this.multiplicand.value;
      this.answer.value = multiplier * multiplicand;
      return false;  // keep the form from submitting
    };
  };​
})(window.onload);

Enterいずれかのファクターボックスを押すと送信もトリガーされるため、ボタンではなく、フォームにミートコードを添付していることに注意してください。必要に応じてボタンにアタッチし、falseを返す送信ハンドラーを追加することもできます。ただし、IMOの方が優れています。この方法では、サーバーへのラウンドトリップが不要なことを除いて、フォームがJSで機能しない場合と同じように機能します（サーバー上のスクリプトがボックスに適切に入力されていると仮定します）。

于 2012-08-19T03:06:12.127 に答える
1

フォームを送信しないように、送信ボタンを変更する必要があります。今すぐ[送信]をクリックすると、フォームが同じページに送信され、ページの再読み込みが行われます。

に変更する<input type="submit" id="submitt">と<button type=button>、機能するはずです。

<form>そもそも要素がなくてもできるでしょう。これにより、テキスト入力でEnterキーを押してもページが再読み込みされなくなります。

于 2012-08-18T15:08:39.090 に答える