Question

我创建了一个移动网站，因此我可以计算出虚构的订单。我有滑块，允许有人选择他们想订购多少三明治。我需要在同一页面上计算不同三明治的总价格，但我无法让它发挥作用。

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

<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）”所以，你要覆盖同一个文档（你的HTML页面）。您需要在页面的元素中写入。所以，尝试这样的事情：

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

这里有一个例子：http://www.w3schools.com/js/js_howto.asp

Answer 2

不要使用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]));
}

Answer 3

它工作正常。

enter image description here

请勿使用document.write，建议您这样做：

使用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>

Demo

Answer 4

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

计算不会与订单脚本相加

4 个答案:

Demo