javascript - HTML 列表并计算总价

Question

对于大多数程序员来说，这似乎非常简单，但由于我正处于编程的第一步，因此我需要一些帮助。

我想要做的是让用户在文本字段中输入一些内容(他们只能输入一些内容，并且会在上面通知他们)，当他们单击按钮时，将创建一个列表他们添加的所有东西。我已经明白了一点。但我还希望当用户键入一些输入时计算价格。

这是我到目前为止所拥有的:

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

这是我附带的 JavaScript :

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);

还有一点很方便，那就是列表中所有商品的旁边都会显示价格？

例如，用户可以输入以下 5 件事

• 换油
• 更换轮胎
• 换灯
• 出行前检查
• 检查轮胎

如果用户键入的内容不在此列表中，则会发生错误。(但那是我自己可以做的事情)

亲切的问候!

Answer 1

您只需设置价格元素的 innerHTML 一次。每次调用 voegWerkToe() 时都需要设置这些值。

只需将这些 set-innerHTML 行包装在一个函数中，您可以在页面加载时以及每当 voegWerkToe() 运行时调用该函数。

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/