CODEWITHSUNDEEP
javascripthtml
DVLanleyC
DVLanleyC

Reputation: 153

HTML list and calculate total price

This may seem very simple for most programmers but as I am at the first step of programming I need a little help with this one.

What I want to do is have the user type in something in the textfield (there are only a few things they can type and they will be informed above this), and when they click the button, a list will be created with all the stuff they added. I already figured that out a bit. But I also want that a price is calculated when the user types some input.

This is what I have so far : 

<h2> Bereken zelf de prijs van andere werken:</h2>
<p> Welke werken had u gewenst? </p>
<input align="left" type="text" name="werken" id="naamwerken">
<input type="button" value="Voeg toe" onClick="voegWerkToe()">
<ul id="werken"> </ul>
<p>Prijs excl. BTW: <span id="werkenNoBTW"> </span> </p>
<p>BTW: <span id="werkenBTW"> </span> </p>
<p>Prijs incl. BTW: <span id="werkenTotaal"> </span> </p>

This is my JavaScript that comes with it : 

var werk;
var prijs = 0;
var prijsexcl = 0;
var btw = 0;


function voegWerkToe() {
var node = document.createElement("LI");
var textnode = document.createTextNode(document.getElementById("naamwerken").value);
node.appendChild(textnode);
document.getElementById("werken").appendChild(node);

// werk toevoegen en prijs berekenen
var werk = document.getElementById("naamwerken").value;
if(werk == "olie vervangen")
{
    prijsexcl = 25;
}

    // berekenen van alle prijzen
    btw = (prijsexcl/100)*6;
    prijs = prijsexcl + btw;
}

// Alle prijzen in de tekst laten weergeven met 2 puntjes na de komma
document.getElementById("werkenTotaal").innerHTML = prijs.toFixed(2);
document.getElementById("werkenBTW").innerHTML = btw.toFixed(2);
document.getElementById("werkenNoBTW").innerHTML = prijsexcl.toFixed(2);

What would also come in handy is that next to all the items in the list the price comes up next to it?

For example these 5 things can the user type

If a user types something that is not in this list an error will occur. (But thats something I can do myself)

Kind regards!

Upvotes: 0

Views: 844

Answers (1)

Moob
Moob

Reputation: 16184

You're only setting the innerHTML of the prices elements once. You need to set these values every time voegWerkToe() is called.

Simply wrap those set-innerHTML lines in a function which you can call when the page loads and whenever voegWerkToe() is run.

var werk;
var prijs = 0;
var prijsexcl = 0;
var btw = 0;

function voegWerkToe() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(document.getElementById("naamwerken").value);
    node.appendChild(textnode);
    document.getElementById("werken").appendChild(node);

    // werk toevoegen en prijs berekenen
    var werk = document.getElementById("naamwerken").value;
    if(werk.toLowerCase() == "olie vervangen")// < toLowerCase() 
    {
        prijsexcl = 25;
    }

    // berekenen van alle prijzen
    btw = (prijsexcl/100)*6;
    prijs = prijsexcl + btw;

    // call the function which sets the innerHTML:
    setPrices();

}

// Create a function to set the price text:
function setPrices(){
    // Alle prijzen in de tekst laten weergeven met 2 puntjes na de komma
    document.getElementById("werkenTotaal").innerHTML = prijs.toFixed(2);
    document.getElementById("werkenBTW").innerHTML = btw.toFixed(2);
    document.getElementById("werkenNoBTW").innerHTML = prijsexcl.toFixed(2);
};

// call the function to set their initial values:
setPrices();

http://jsfiddle.net/hwzhoxnq/

Upvotes: 1

Related Questions