GermanX GermanX - 1 month ago 9
Javascript Question

Append a list to ul

Im trying to create a list under a ul with following code:

function calc()
{
document.getElementById("calc_result").innerHTML;
percent = 1;
profit = 0;
amount = document.getElementById("calc_amount").value;
if (amount>100000) amount = 100000;
if (amount<10) amount = 0;
for (var i = 1; i <= 365; i++)
{
profit = parseFloat(profit) + parseFloat(amount*percent/100);
profitday = parseFloat(amount*percent/100);

var ul = document.getElementById("calc_result");
var li = document.createElement("li");
li.appendChild('<li class="cfix"><span>'+i+'</span><span>$'+profitday.toFixed(2)+'</span><span>$'+profit.toFixed(2)+'</span></li>');
ul.appendChild(li);
if (percent<4)
percent += 0.5;
}
}


Output should be like this:

<ul class="inner" id="calc_result">
<li class="cfix">
<span>1</span>
<span>$2.00</span>
<span>$2.00</span>


.
.
.

The script dont appends the list...

Hopefully someone can help :/

Answer

The problem was where you try to append the text as a child. li.appendChild('<li class="cfix"><span>'+i+'</span><span>$'+profitday.toFixed(2)+'</span><span>$'+profit.toFixed(2)+'</span></li>');should be li.innerHTML = '<span>'+i+'</span><span>$'+profitday.toFixed(2)+'</span><span>$'+profit.toFixed(2)+'</span>'

function calc()
{
    document.getElementById("calc_result").innerHTML;
    percent = 1;
    profit = 0;
    amount = document.getElementById("calc_amount").value;  
    if (amount>100000) amount = 100000;
    if (amount<10) amount = 0;
    for (var i = 1; i <= 365; i++) 
    {
        profit = parseFloat(profit) + parseFloat(amount*percent/100);
        profitday = parseFloat(amount*percent/100);

        var ul = document.getElementById("calc_result");
        var li = document.createElement("li");
        li.className = "cfix";
        li.innerHTML =  '<span>'+i+'</span><span>$'+profitday.toFixed(2)+'</span><span>$'+profit.toFixed(2)+'</span>'
        ul.appendChild(li);     
        if (percent<4) 
            percent += 0.5;
    }
}