クッキでー取得した動的な変数名をhtmlソースでの表示について

Question

コードを短くしたいと考え下記のソースに変更しました。
vstitle is not definedとエラーが表示されてしまいます。
vstitle+(i+1)箇所の書き方がうまくいっていないと思うのですが、
原因が不明です。
ご教授お願いいたします。

①変更前の正常に動く場合のソース

       function Title(){
		var vstitle1 = getCookie('vstitle1');
		var url1 = getCookie('url1');
		  
		if(vstitle1 !=="" && url1 !==""){
			  $("div.save").append('<h3></h3>');
		      $("p.visit").append('<p class="vs01"><a href="'+ url1 +'">' + vstitle1+'</a><button class="Titlebtn"><span></span></button></p>');
        	 }
		var vstitle2 = getCookie('vstitle2');
		var url2 = getCookie('url2');
		 if(vstitle2 !=="" && url2 !==""){
			("p.visit").append('<p class="vs02"><a href="'+ url2 +'">' + vstitle2+'</a><button class="Titlebtn"><span></span></button></p>');
     	                  }
						  
	  	var vstitle3 = getCookie('vstitle3');
		var url3 = getCookie('url3');
		 if(vstitle3 !=="" && url3 !==""){
			("p.visit").append('<p class="vs03"><a href="'+ ur3 +'">' + vstitle3+'</a><button class="Titlebtn"><span></span></button></p>');
     	                  }
	    	else{}
		}
	  

①変更後のエラーが表示されるコード

	
	     function Title(){
		var vstitle1 = getCookie('vstitle1');
		var url1 = getCookie('url1');
		var breakcunt = 4;
  		for( i=0; i<4; i++ ){
			
		if (getCookie('vstitle'+(i+1)) !=="" && getCookie('url'+(i+1)) !==""){
			
		      $("p.visit").append('<p class="vs01"><a href="'+ ('url'+(i+1)) +'">' + vstitle+(i+1) +'</a><button class="Titlebtn"><span></span></button></p>'); 
		}
		}
		if(breakcunt>3){
			return "";
		}
		else{}
}

Answer 1

// $("p.visit").append('<p class="vs01"><a href="'+ ('url'+(i+1)) +'">' + vstitle+(i+1) +'</a><button class="Titlebtn"><span></span></button></p>'); 
//                                                                                    ↓
   $("p.visit").append('<p class="vs01"><a href="'+ ('url'+(i+1)) +'">' + getCookie('vstitle'+(i+1)) +'</a><button class="Titlebtn"><span></span></button></p>'); 

Comments

[退会済みユーザー]

ありがとうございました。助かりました。