0

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

所以我在头脑中使用的代码是：

<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。尝试使用警报来进行调试。而是通过设置另一个元素的 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 回答
1

它工作正常。

在此处输入图像描述

不要document.write用于这个，更推荐这个：

  • 创建一个 divid = "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 回答
0

初始化页面时，您将获得滑块的初始值。当函数 bereken 被调用时，它总是使用滑块的初始值。您需要重写函数以在调用函数时使用滑块的值。

于 2012-05-24T21:45:55.667 回答