ボタンでdivに関数の結果をクリックします

Question

私はJavaScriptを学ぶと私は問題があります。私はボタンをクリックして関数の結果をdivに入れようとしています。

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

と体が含まれています

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

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

のdiv＃のchoinkaへ]ボタンをクリックすることで、機能choinkaの結果を（）に置く方法は？

Answer 1

実用的なコードです。いくつかの注意：

• あなたが書いているdocumentからdocument.write()を使用して（良い習慣ではありません）。変数内のhtmlを連結し、要素divのinnerHTMLプロパティを設定する方が効率的です。＃

• ループは機能しませんでした。あなたがj <= x.lengthを書くことahveとなる2つ目のパラメータは、ループの条件ではありませんj <= x

ここ

jsfiddle（;-)メリークリスマス）

---

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; 

}