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/

HTML列表并计算总价

1 个答案: