Question

I learn javascript and I have problem. I trying put function results into a div by click on button.

<script type="text/javascript">

function choinka() {

var x=document.getElementById("liczba").value;
var a="W";
var b="W";
var px="15"

for(j=1;j<=x;j++)
{
for(i=j;i<=x;i++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<span style='color:green;background:green;line-height:" + px + "px;'>" + b + "</span>");
b+="WW";
for(k=j;k<=x;k++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<br />");
}
for(k=1;k<=x/2;k++)
{
for(m=1;m<=x;m++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
b="W";
document.write("<span style='color:brown;background:brown;line-height:" + px + "px;'>" + b + "</span>");

for(m=1;m<=x;m++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<br />");
}

}

</script>

and body contain:

<p>Wielkość: <input type="text" id="liczba" /><input type="submit" value="Rysuj" onclick="choinka()" /></p>

<div id="choinka"></div>

How put results of function choinka() by clicking button into the div#choinka?

Answer 1

Here is a working code. Some notes:

• you are writing to document using document.write() (which is not a good habit). It’s more efficient to contatenate the html in a variable and then set the innerHTML property of the element div#

• your loops were not working. the second parameter is the condition of the loop so you ahve to write j <= x.length and not j <= x

Here is a working example on jsfiddle (merry christmas ;-))

---

function choinka() {

    var x = document.getElementById("liczba").value;
    var a = "W";
    var b = "W";
    var px = "15";

    var html = '';

    for (j = 1; j <= x.length; j++) {
        for (i = j; i <= x.length; i++) {
            html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
        }
        html += "<span style='color:green;background:green;line-height:" + px + "px;'>" + b + "</span>"
        b += "WW";
        for (k = j; k <= x.length; k++) {
            html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
        }
        html += "<br />";
    }
    for (k = 1; k <= x.length / 2; k++) {
        for (m = 1; m <= x.length; m++) {
            html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
        }
        b = "W";
        html += "<span style='color:brown;background:brown;line-height:" + px + "px;'>" + b + "</span>";

        for (m = 1; m <= x.length; m++) {
            html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
        }
        html += "<br />";
    }

    document.getElementById('choinka').innerHTML = html;

}