Calculations don't add up with order script

Question

I made a mobile website so I can calculate fictional orders. I have sliders which allow someone to select how many sandwiches they would like to order. I need to calculate the total price of different sandwiches on the same page but I can't get it to work.

So the code I'm using in the head is:

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

And this is the div where the problem lies.

I hope I gave you guys enough information about this.

Answer 1

It is working correctly.

Don't use document.write for this, this is more recommended:

• create a div with id = "total"
• use document.getElementById("total").innerHTML = "calculated total here" to update the value

Also, with your current script, even if you actualize the input values, the output won't change. Why? because you stored the values of aanatal only when the page loaded.

If you want to get the values every time you call the function, just move them inside.

Something like this

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

Don't use document.write. Try an alert instead for debugging. Write your output to your page instead by setting the innerHTML of another element. See this example, your code basically works. Your function needs to include the document.getElementById calls inside of it or they won't reinitialize on each button press.

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

Dude, you are doing it good. The problem is that you are saying "hey Page (document) this is your new value (document.write)" So, you're overwriting the same document (your HTML page). You need to write in an element of your page. So, try something like this:

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

Here you have an example: http://www.w3schools.com/js/js_howto.asp

Answer 4

When you initialize the page you get the inital value of the sliders. When the function bereken is called it is always using the initial value of the sliders. You need to rewrite the function to use the values of the sliders at the time the function is called.