Ошибка( Uncaught TypeError: Cannot set properties of null (setting 'onclick'))?

Question

[Kirill_xxx]

HTML
—————

<div class="quiz">
        <div id="title" class="quiz__title">Тест по Brawl Stars</div>
        <div class="quiz__progress-wrap">
            <div class="quiz__progress">
                <div id="progress-fill" class="quiz__progress-fill"></div>
            </div>
            <div class="quiz__progress-questions">
                <strong id="question-number">1</strong>
                <span>/</span>
                <span id="total-questions">5</span>
            </div>
        </div>
        <div class="quiz__questions">
            <img src="jpg/_1.jpg" alt="#"> <br>
            <span id="question">Где здесь Леон?
            </span><strong id="question-position">1</strong>
        </div>
        <div id="answers" class="quiz__answers">
            <div class="quiz__answer ">1</div>
            <div class="quiz__answer">2</div>
            <div class="quiz__answer quiz__answer_active">3</div>
        </div>
        <div id="next" class="quiz__btn">Следующий вопрос</div>
    </div><code lang="html">

<code lang="javascript">

JAVASCRIPT:
——————
const dom = {
     title: document.getElementById('title'),
    progress: {
        progressFill: document.getElementById('progress-fill'),
        questionNumber: document.getElementById('question-number'),
        totalQuestions: document.getElementById('total-questions'),
    },
    step: {
        question: document.getElementById('question'),
        questionPosition: document.getElementById('question-position'),
    },
    answers: document.getElementById('answers'),
    next: document.getElementById('next'),
};

let questionsCount = data.questions.length;
let step = 2;

function renderProgress(total, step) {
    const progressPercent = 100 / total * step;
    console.log(progressPercent);
    dom.progress.questionNumber.innerHTML = step;
    dom.progress.totalQuestions.innerHTML = total;
    dom.progressFill.style.widht = '${progressPercent}%';
}

dom.next.onclick = () => {
    step = step + 1;
    renderProgress(total, step);
};

renderProgress(questionsCount, step);

—————

ОШИБКА ТУТ:
dom.next.onclick = () => {
    step = step + 1;
    renderProgress(total, step);
};

Comments

[ostrooovskyy]

Уберите <div id="next"></div>
Вставьте <button id="next">Следующий вопрос</button>