javascript - 计算结果与订单脚本不符

Question

我制作了一个移动网站，这样我就可以计算虚构的订单。我有 slider ，可以让人们选择他们想要订购多少个三明治。我需要计算同一页面上不同三明治的总价，但我无法让它工作。

所以我在头部使用的代码是:

<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。

我希望我给了你们足够的信息。

Answer 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]));
}