Forループを使用してIF ... Elseステートメントを簡略化する[Javascript]

Question

コンテキスト：私は、完了/訪問したページをユーザーに知らせるためにコンテンツのテーブルを作成しています。

以下のif ... else文は単独で動作していますが、FORループの "i"カウンタを使用して他の30個の章のチェックを生成します。

スクリプトは、visited/unvisitedを表す値1または0を含むlocalstorageを最初にロードし、そのデータを変数chap1checkに転送します。その結果に基づいて、コンテンツのテーブルは、どのページが訪問済みか未訪問かをユーザに示すべきである。

私は何をする必要があるのか​​わからないが、理論的には、 "chap ..."をすべて "i"の値に置き換える必要があります。

<script type="text/javascript"> 

var i; 
for (i = 1; i <=31; i++){ 
    var chap1Check = localStorage.getItem("chap1Status"); 

    if(chap1Check == "1"){ 
     document.getElementById('chap1Completion').innerHTML = "Completed"; 
    }else{ 
     document.getElementById('chap1Completion').innerHTML = "Incomplete"; 
    } 
} 
</script> 

Answer 1

ちょうど番号の後の文字列の一部に続く数（i）と番号の前に文字列の一部を連結。

for (var i = 1; i <= 31; i ++){ 
    var chapCheck = localStorage.getItem("chap" + i + "Status"); 
    document.getElementById('chap' + i + 'Completion').textContent = chapCheck == "1" ? "Completed" : "Incomplete"; 
} 

Answer 2

次のコードは動作します。 しかし、配列をローカルストレージに格納し、配列にインデックスを付けてアクセスするだけで、はるかにクリーンになります。また、ループの上にmapファンクタを使用してみてください。

また、次のように、forループ内のiの宣言をインライン化する必要があることにも注意してください。そうでなければ、forループでのiの今後の使用と競合する可能性があります。

for (var i = 1; i <=31; i++){ 
    var chapterChecker = localStorage.getItem("chap"+i+"Status"); 

    if(chap1Check == "1"){ 
     document.getElementById('chap'+i+'Completion').innerHTML = "Completed"; 
    }else{ 
     document.getElementById('chap'+i+'Completion').innerHTML = "Incomplete"; 
    } 
} 

Answer 3

この

for (var i = 1; i <=31; i++){ 
    let content = ''; 
    if(localStorage.getItem(`chap${i}Status`) == "1"){ 
     content = "Completed"; 
    }else{ 
     content = "Incomplete"; 
    } 
    document.getElementById(`chap${i}Completion`).innerHTML = content; 
}