Упрощение IF ... Else Statement with For Loop [Javascript]

Question

Контекст: Я создаю таблицу содержимого, чтобы сообщить пользователю страницы (страницы), которые они завершили/посетили.

Операция if ... else работает сама по себе, но я хочу сгенерировать проверку для других 30 глав, используя счетчик «i» из цикла FOR.

Сценарий будет сначала загружать localstorage, который содержит значение 1 или 0, представляющее посещенный/непереданный, и передавать эти данные на переменную 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.

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

Решение с использованием ES6 строки шаблона может быть это

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