Как убрать бесконечную загрузку страницы html?

Question

SuperDuperPuper @SuperDuperPuper

Как убрать бесконечную загрузку страницы html?

После того как я добавляю первую строчку кода("document.querySelector(".countQuestions").value = localStorage.getItem("setting") ===null ? 0 : localStorage.getItem("setting");"), у меня перестает грузится страница. HTML идет после кода JS.

document.querySelector(".countQuestions").value = localStorage.getItem("setting") ===null ? 0 : localStorage.getItem("setting");
let countQuestions = document.querySelector('.countQuestions').value;

let numQuestion = document.querySelector(".countDiv .count");
let text = document.querySelector(".main .text");
let butRestart = document.querySelector(".settings .but");

let InputDate = document.querySelector(".inputArea .date");
let InputEv = document.querySelector(".inputArea .event");
let ButCheck = document.querySelector(".inputArea .but.check");
let ButCont = document.querySelector(".inputArea .but.next")

function funcButCont(){
    count++;
    if (count<Questions.length){
        card = set_card(Questions,count);
        next(card,count+1,Questions.length);
    }
    else {
        alert(`было выполненно ${count} из ${Questions.length}`);
    }
}
function sleep(ms) {
    let t = (new Date()).getTime();
    let i = 0;
    while (((new Date()).getTime() - t) < ms){
        i++;
    }
}
function funcButRestart(){
    localStorage.setItem('setting', Number(document.querySelector('.countQuestions').value));
    console.log(localStorage.getItem('setting'));
    location.reload();
}
function funcButCheck(){
    getAnswer = true;
    let lenQues = Questions.length;
    if (card.get('date') === InputDate.value 
    && card.get("event")=== InputEv.value ){
        //DrawBorderColor("green");
    }
    else{
        //DrawBorderColor("red");
    }
    setTimeOut(next,500,card,count,lenQues);
    count++;

}

function next(ev,count,lenQues){
    output_event(ev,count,lenQues);
    DrawBorderColor('none');
}

function DrawBorderColor(){

}
function output_event(ev,count,lenQues){
    numQuestion.innerHTML = `${count}/${lenQues}`;
    text.innerHTML =`<p>${ev.get("event")}</p>`;
}

function getRandomNum(min,max){
    return Math.floor(Math.random() * (max  - min) + min);
}
function genArr(countQuestions){
    Questions = [];
    let events = JSON.parse(localStorage.getItem("events"));
    let max = events.length;
    for(let i = 0;i<countQuestions;i++){
        let breakVar;
        //генерация элемента массива
        while (breakVar!= false){
            let index = getRandomNum(0,max);
            breakVar = false;
            for( el of Questions){
                if ((el[0] === events[index][0])
                    && (el[1] === events[index][1])){
                    breakVar = true;
                    break;
                } 
            }
            
            if (breakVar === false){
                Questions.push(events[index]);
                //events.splice(index,1);
                //max -= 1;
            }
        }

    }
    return Questions;
}

function set_card(Questions,index){
    return new Map([
        ["date",Questions[index][0]],
        ["event",Questions[index][1]]
    ]);
}

function main(){
    Questions = genArr(countQuestions);
    count = 0;
    card = set_card(Questions,count);

    output_event(card,1,Questions.length);
    ButCheck.addEventListener('click',funcButCheck);
    ButCont.addEventListener('click',funcButCont);
    butRestart.addEventListener('click', funcButRestart);

}
let count;
let Questions;
let card;
main();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" type = "text/css" href = "../styles/learning.css">
    <script defer  src = "../js/learning.js"></script>
    <base target = "_blank">
</head>
<body>
<div>
    <div class = "main">
        <div class = "settings">
            <h1>Настройки</h1>
            <input class = "countQuestions" placeholder="Введите кол-во вопросов">
            <button class = "but" >Restart</button>
        </div>
        <div class = "countDiv">
            <h1>Событие</h1>
            <h1 class = "count">1/n</h1>
        </div>
        <div class = "text" >
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique porro nobis culpa eveniet aliquam eius animi iste neque fugit id, aliquid corporis quia impedit tempore eum omnis ad accusantium rem?</p>
        </div>
    </div>

    <div class = "inputArea">
        <h1>Дата</h1>
        <input class = "date" placeholder="Дата">
        <input class = "event" placeholder="Что произошло">
        <button class = "but check">Проверить</button>
        <button  class = "but next">Пропустить</button>
    </div>
</div>
</body>
</html>