I need help with a online website tutorial that I had followed and am altering to my own extent. It is showing me a 'Uncaught TypeError' and I cannot figure out the source of it. Please help by explaining it.

The code is in Javascript, Html and css Below:

index.html:

Question

style.css:

*, *::before, *::after{

box-sizing: border-box;

}

body{

padding: 0;

margin: 0;

display: flex;

width: 100vw;

height: 100vh;

justify-content: center;

align-items: center;

}

.container{

width: 800px;

max-width: 80%;

background-color: whitesmoke;

border: 3px solid;

border-color: red;

border-radius: 20px;

padding: 10px;

box-shadow: 0 0 10px 2px;

}

.button-grid{

display: grid;

grid-template-columns: repeat(2, auto);

gap: 5px;

margin: 20px 0;

}

.button{

border: 3px solid;

border-color: black;

background-color: whitesmoke;

border-radius: 20px;

padding: 5px 10px;

color: black;

outline: none;

}

.button:focus{

border-color: crimson;

}

.button:hover{

border-color: crimson;

}

.button:active{

border-color:rgb(255, 0, 51);

}

.submit-button, .next-button{

font-size: 1rem;

font-weight: bold;

padding: 10px 20px;

gap: 5px;

margin: 20px 0;

}

.controls{

display: flex;

justify-content: center;

align-items: center;

}

script.js:

const questionViewerElement = document.getElementById('question-container')

const questionElement = document.getElementById('question')

const answerButtonElement = document.getElementById('answer-button')

let shufflesQuestions, currentQuestionIndex

questionViewerElement.addEventListener('load', startQuiz)//right after the question container loads, The Start Quiz function initiates

//Bootstrap to start quiz if the question container has been loaded

function startQuiz(){

console.log('quiz started')

console.log('initiating quiz')

shufflesQuestions = questions.sort(() => Math.random() - .5)

currentQuestionIndex = 0

setNextQuestion()

}

//Question set up functions

function setNextQuestion(){

showQuestion(shufflesQuestions[currentQuestionIndex])

}

function showQuestion(question){

questionElement.innerText = question.question

}

//Answer set up functions

function selectAnswer(){

}

const questions = [

{

question: 'is this a demo?',

answers:[

{text: 'yes' },

{text: 'no'}

]

}

]

This is as much as I got done so far, Any help would be appreciated.

Console Page Filesystem : index.html style.css content.js > >> top 0 127.0.0.1:5500 index.html script.js style.css negbar.ad-blocker.org 1 // chrome.runtime.onMessage. addListener(: - 2 // const re = new RegExp('bear', 'gi 3 // const matches = document.documenti 4 // sendResponse({count: matches.Leng 5 // }) 6 7 const re = new RegExp('bear', 'gi') 8 const matches = document.documentElement 9 chrome.runtime. sendMessage({ 10 url: window.location.href, 11 count: matches.length 12 }) Question {} Line 11, Column 20 Answer 1 Answer 2 Coverage: n/a Scope Watch Answer 3 Answer 4 Call Stack Not paused Not paused Breakpoints Submit Next No breakpoints XHR/fetch Breakpoints DOM Breakpoints Global Listeners Event Listener Breakpoints : Console What's New X top o Filter Default levels o content.js:11 Uncaught TypeError: Cannot read property 'length' of null at content.js:11