0

そのため、最近、document.writeを使用しないようにアドバイスされました。しかし、DOM操作を使用して画面にドキュメントを印刷する方法がわからないようです。この機能は、ボタンを押すと車で移動したマイル数を入力し、カーボンフットプリントを取得できるように機能します。document.writeを使用した場合にのみ、ボタンをクリックした後にページ全体が上書きされます。getElementbyIdを試しましたが、何も出力されないようですので、おそらく正しく使用されていないことがわかります。ページを上書きせずに機能を完了する代替案に関するアイデアは、非常に役立ちます>

以下は、ページ全体を上書きするdocument.writeだけで私が持っているコードです。

<script>

    $(document).ready(function() {
        $(".button").click(function() {

            var myNumber = 19.2;
            var myAnswer = prompt ("How many miles did you travel?");
            document.write( " Your Carbon Foot print is:" + myAnswer * myNumber + "lbs" );

          });
      });
      </script>
4

2 に答える 2

1

DOM操作には、ドキュメント要素の作成とドキュメントツリーへの挿入が含まれます。JSで大規模な作業を行いたい場合は、これが第二の性質になるはずです。

- document.write(...
+ $("<span>").text(' Your Carbon Foot print ...').appendTo("body");

テキストを他の何かに追加したいと思うかもしれませんが、上記は同様の影響を及ぼし、ページ全体を上書きしないようにする必要があります。

于 2013-01-22T02:09:51.677 に答える
0

あなたはJQueryにかなり慣れていないようですね-ようこそ！

JQueryを入手した後は、document.writeまたはその他の低レベルのDOMツールに戻る必要はほとんどありません（ただし、それらを時々知ることは依然として不可欠です）。

したがって、HTMLから始めます。あなたはおそらく次のようなもので行くでしょう：

<button id="calcbutton">Calculate Footprint</button>
<div id="carbonresult"></div>

例では、クラスではなくIDを使用してボタンを識別しました（IDは一意である必要があり、クラスは複数の要素に適用できます）が、それでも機能します。

スクリプトの場合：

$(document).ready(function(){
    $("#calcbutton").click(function(){
        var convFactor = 19.2;
        var milesTravelled = prompt("How many miles did you travel?");
        var resultMsg = " Your Carbon Footprint is: " + milesTravelled * convFactor
        $("#carbonresult").text(resultMsg);
    });
});

JQueryを使用して、.text（）、. html（）、またはappend（）を使用して選択した要素内に結果を配置することにより、はるかに詳細な制御が可能になります。

于 2013-01-22T02:45:30.900 に答える