質問: プログラミングを勉強し始めて2週間ほどです。 今、クリックする度に行が増える、というプログラムを 作りたいのですが、うまくいかずに困っています。 最初の1行はHTMLで作り、クリックするとその下に 100行表示され、さらに jun のところに 1~100の数字が表示される...というのが理想なのですが、 現段階では、 最初の1行の下に100行横に並んで出てきてしまいます。 しかも、クリックする度に100行横に並んで出てきます... 1行に4つセルが入っていて、4つのセルごとに改行されるのが理想です。(伝わりますかね...?) さらに、いまのままだと無限に行が生成されるっぽいです... ``` aa bb cc dd ``` ``` var hyou=document.getElementById("hyou"); var nakami=document.getElementById("nakami"); var nakami2=document.getElementById("nakami2"); function fnc(){ var num=0; var jun=1; for(num; num<100; num++){ var tr=document.createElement("tr"); for(jun; jun<=100; jun++){ var td1=document.createElement("td"); td1.innerHTML=jun; tr.appendChild(td1); var td2=document.createElement("td"); td2.innerHTML="bb"; tr.appendChild(td2); var td3=document.createElement("td"); td3.innerHTML="cc"; tr.appendChild(td3); var td4=document.createElement("td"); td4.innerHTML="dd"; tr.appendChild(td4);} nakami2.appendChild(tr);} } ``` javascriptの nakami2.appendChild(tr); の位置を変えたり 追加する要素を行ではなくテーブルにしてみたりしましたが同じ結果でした... 今自分が持っている知識で作りたいので、ここにある要素やHTMLタグ以外は あまり使いたくないです。もしこれがないと絶対に無理だから!という ものがありましたらご教授願いたいです... 本当に知識ほぼゼロから始めているのでわからないことだらけです。 質問も初めてするので、やり方がいまいちわからなかったのですが、 よろしくお願い致します。
回答: 現状のコードですと、繰り返しのforループが二重になっているので、 100項目が100行できているのではないかと思います。 ご提示のコードをベースに修正を加えるとこのような形になるかと思います。 ``` var hyou = document.getElementById("hyou"); var nakami = document.getElementById("nakami"); var nakami2 = document.getElementById("nakami2"); function fnc() { var num = 1; // 0 -> 1 に変更 //var jun = 1; // ここは不要 for (num; num <= 100; num++) { // 条件を "<=" に変更 var tr = document.createElement("tr"); //for (jun; jun <= 100; jun++) { // ここは不要 var td1 = document.createElement("td"); td1.innerHTML = num; // jun -> num に変更 tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "bb"; tr.appendChild(td2); var td3 = document.createElement("td"); td3.innerHTML = "cc"; tr.appendChild(td3); var td4 = document.createElement("td"); td4.innerHTML = "dd"; tr.appendChild(td4); //} // ここは不要 nakami2.appendChild(tr); } } ```