forの処理回数の上限を設定したい。

Question

前提・実現したいこと

javascriptを勉強し始めて約２週間なのですが、
下記の問題が分からず先に進めません。

javascriptで、
trを何回をクリックしても100人分だけテーブルを
表示させるようにしたいです。
100人以降は表示させないようにしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

//tableデザイン
var $box1 = document.getElementById("box1");
$box1.style.backgroundColor = "#7b5544";
$box1.style.borderColor = "#7b5544";
$box1.style.color = "#ffffff";

var $box2 = document.getElementById("box2");


//処理
document.getElementById("main").addEventListener("click", function(){
	
	var num;
	
	for(num = 1; num <= 100; num++){
		var tr = document.createElement("tr");
		tr.style.backgroundColor = "#ffffff";
		tr.style.color = "#000000";
		
		
		var td1 = document.createElement("td");
		td1.innerHTML = num;
		tr.appendChild(td1);

		
		var td2 = document.createElement("td");
		td2.innerHTML = "ユーザー名" + num;
		tr.appendChild(td2);
		
		var td3 = document.createElement("td");
		td3.innerHTML = "ログインID" + num;
		tr.appendChild(td3);
		
		var td4 = document.createElement("td");
		td4.innerHTML = "パスワード" + num;
		tr.appendChild(td4);
		
		$box2.appendChild(tr);
		
		if(100 < num){
			break;
		}
	}
	
}, false);

試したこと

breakや、returnを付けてみたのですが、
思った通りに動きませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[azuapricot]

JavaではなくJQuery、JavaScriptですよね。
全くの別物なので混同しないでください。

[退会済みユーザー]

「思った通り」とは何でしょうか？
エスパーじゃないのであなたの思ったこと読めないんですよ。

Answer 1

まず、

if(100 < num){
  break;
}

ここいらないのでは？

for(num = 1; num <= 100; num++){
// 省略
}

のforの条件式で用は足りてると思います。

さて、なぜ押すたびに繰り返し100個できるのか、
原因は簡単です。

押すたびに、”1”からスタートしているからです。

ようは、クリックするたびに、回数制限をかけるはずのnum変数が生成されているからです。

下記のように、num変数の他に、大元の回数制限変数を、クリックのイベント外に用意しましょう。

//tableデザイン
var $box1 = document.getElementById("box1");
$box1.style.backgroundColor = "#7b5544";
$box1.style.borderColor = "#7b5544";
$box1.style.color = "#ffffff";

var $box2 = document.getElementById("box2");

var countLimit = 0;

//処理
document.getElementById("main").addEventListener("click", function(){
    // そもそも外側スコープのcountLimitが99以下（100回）でないと何もしない
    if (countLimit < 100) {
      // あとは中身は同じくする
      var num;

      for(num = 1; num <= 100; num++){
        var tr = document.createElement("tr");
        tr.style.backgroundColor = "#ffffff";
        tr.style.color = "#000000";


        var td1 = document.createElement("td");
        td1.innerHTML = num;
        tr.appendChild(td1);


        var td2 = document.createElement("td");
        td2.innerHTML = "ユーザー名" + num;
        tr.appendChild(td2);

        var td3 = document.createElement("td");
        td3.innerHTML = "ログインID" + num;
        tr.appendChild(td3);

        var td4 = document.createElement("td");
        td4.innerHTML = "パスワード" + num;
        tr.appendChild(td4);

        $box2.appendChild(tr);

        // 外側スコープのcountLimitを足していく
        countLimit++;
      }
  }

}, false);

ここら辺の、”変数のスコープ”に関しては、よく調べ、勉強されるといいと思います。