0

架空の注文を計算できるように、モバイル Web サイトを作成しました。注文するサンドイッチの数を選択できるスライダーがあります。同じページでさまざまなサンドイッチの合計価格を計算する必要がありますが、うまくいきません。

したがって、頭の中で使用しているコードは次のとおりです。

<script>
function bereken(){
    document.write( (prijzen[0]*aantal[0]) + (prijzen[1]*aantal[1]) + (prijzen[2]*aantal[2]) + (prijzen[3]*aantal[3]));
}
</script>

<

\\  

// > <h3>
                    Uw Bestelling
                </h3>
                <a data-role="button" data-transition="fade" href="#page5" data-icon="home" data-iconpos="left">
                    Home
                </a>
            </div>
            <div data-role="content">
                <div style="width: 100%; height: 30px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
                    <img src="http://www.cookschool.org/media/34429/pizza-banner.jpg" alt="pizza" style="width: 100%; height: 30px" />
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="slider2">
                            Broodje Italia €2,95
                        </label>
                        <input type="range" name="slider" id="slider2" value="1" min="0" max="100" data-highlight="false" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="slider3">
                            Broodje Formagio €3,45
                        </label>
                        <input type="range" name="slider" id="slider3" value="1" min="0" max="100" data-highlight="false" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="slider4">
                            Broodje Tricolore €3,25
                        </label>
                        <input type="range" name="slider" id="slider4" value="1" min="0" max="100" data-highlight="false" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="slider5">
                            Broodje Parma €3,96
                        </label>
                        <input type="range" name="slider" id="slider5" value="1" min="0" max="100" data-highlight="false" />
                    </fieldset>
                </div>
               <input name="Totaalprijs" type="button" value="Uitrekenen" onClick="javascript:bereken();">
                                              <script>
prijzen=new Array();
prijzen[0]=2.95;
prijzen[1]=3.45;
prijzen[2]=3.25;
prijzen[3]=3.95;

aantal=new Array();
aantal[0]=document.getElementById('slider2').value;
aantal[1]=document.getElementById('slider3').value;
aantal[2]=document.getElementById('slider4').value;
aantal[3]=document.getElementById('slider5').value;
</script>
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    Schoolopdracht
                </h3>
            </div>
        </div>
\\ >

そして、これは問題があるdivです。

これについて皆さんに十分な情報を提供できたことを願っています。

4

4 に答える 4

1

おい、あなたはそれをうまくやっています。問題は、「ページ (ドキュメント) これは新しい値 (document.write) です」と言っているということです。つまり、同じドキュメント (HTML ページ) を上書きしています。ページの要素に書き込む必要があります。だから、次のようなことを試してください：

<script type="text/javascript">
    document.getElementById("myElement").innerHTML="Some text";
</script>

ここに例があります：http://www.w3schools.com/js/js_howto.asp

于 2012-05-24T21:46:26.940 に答える
1

正常に動作しています。

ここに画像の説明を入力

これには使用しないでくださいdocument.write。これはより推奨されます。

  • でdivを作成しますid = "total"
  • document.getElementById("total").innerHTML = "calculated total here"値を更新するために使用します

また、現在のスクリプトでは、入力値を具体化しても出力は変わりません。なんで？aanatalページがロードされたときのみの値を保存したためです。

関数を呼び出すたびに値を取得したい場合は、それらを内部に移動するだけです。

このようなもの

<input id="slider1" value="1" />
<input id="slider2" value="1" />
<input id="slider3" value="1" />
<input id="slider4" value="1" />
<div id="total">Total: </div>
<input type="button" value="Uitrekenen" onClick="bereken();" />

<script type="text/javascript">
    function bereken() {
        for (var i = 0, total = 0; i < 4; i++) {
            aantal[i]= document.getElementById("slider" + (i + 1)).value; //get new values, (i+1) because we start at i=0
            total += (prijzen[i] * aantal[i]);//add them together
        }

        document.getElementById("total").innerHTML = "Total: " + total; //update the total
    }

    var aantal = new Array(4); //create the array that we will be using
    var prijzen = [2.95, 3.45, 3.25, 3.95]; //the same above, but placing placing the values outside the function as they won't change
</script>

デモ

于 2012-05-24T21:59:24.467 に答える
1

document.write を使用しないでください。デバッグの代わりにアラートを試してください。代わりに、別の要素の innerHTML を設定して、出力をページに書き込みます。この例を参照してください。コードは基本的に機能します。関数の内部に呼び出しを含める必要がありdocument.getElementByIdます。そうしないと、ボタンを押すたびに再初期化されません。

http://jsfiddle.net/6eEVf/

prijzen=new Array();
prijzen[0]=2.95;
prijzen[1]=3.45;
prijzen[2]=3.25;
prijzen[3]=3.95;

function bereken(){
    aantal=new Array();
    aantal[0]=document.getElementById('slider2').value;
    aantal[1]=document.getElementById('slider3').value;
    aantal[2]=document.getElementById('slider4').value;
    aantal[3]=document.getElementById('slider5').value;

    alert( (prijzen[0]*aantal[0]) + (prijzen[1]*aantal[1]) + (prijzen[2]*aantal[2]) + (prijzen[3]*aantal[3]));
}
于 2012-05-24T21:53:06.500 に答える
0

ページを初期化すると、スライダーの初期値が取得されます。関数 bereken が呼び出されると、常にスライダーの初期値が使用されます。関数が呼び出された時点でスライダーの値を使用するように関数を書き直す必要があります。

于 2012-05-24T21:45:55.667 に答える