My time left doens't work

JavaScript
1

My function startTimer doesn’t work someone know why?

const start_btn = document.querySelector(".start_btn button")
const info_box = document.querySelector(".info_box")
const exit_btn = info_box.querySelector(".buttons .quit")
const continue_btn = document.querySelector(".buttons .restart")
const quiz_box = document.querySelector(".quiz_box")
const option_list = document.querySelector(".option_list")
const timeCount = quiz_box.querySelector(".timer .timer_sec")

//If Start Quiz Button Clicked
start_btn.onclick = () =>{
    info_box.classList.add("activeInfo") //show the info box
}

//If Exit Button Clicked
exit_btn.onclick = () =>{
    info_box.classList.remove("activeInfo") //hide the info box
}

//If continue button clicked
continue_btn.onclick = () =>{
    info_box.classList.remove("activeInfo"); //hide the info box
    quiz_box.classList.add("activeQuiz"); //show the quiz
    showQuestions(0)
    queCounter(1)
    startTimer(15)
}

let que_count = 0
let que_numb = 1
let counter
let timeValue = 15

const next_btn = quiz_box.querySelector(".next_btn")

//If next Button Clicked
next_btn.onclick = ()=>{
    if(que_count < questions.length - 1){
        que_count++
        que_numb++
    showQuestions(que_count)
    queCounter(que_numb)
    clearInterval(counter)
    startTimer(timeValue)
    }else{
        console.log("Questions completed")
    }
}


//getting questions and options from array
function showQuestions(index){
    const que_text = document.querySelector(".que_text")
    let que_tag = '<span>'+ questions[index].numb + "." + questions[index].question +'</span>'
    let option_tag = '<div class="option">'+ questions[index].options[0] +'<span></span></div>'
     + '<div class="option">' + questions[index].options[1] + '<span></span></div>' 
     + '<div class="option">' + questions[index].options[2] + '<span></span></div>'
     +'<div class="option">' + questions[index].options[3] + '<span></span></div>'

    que_text.innerHTML = que_tag
    option_list.innerHTML = option_tag
    const option = option_list.querySelectorAll(".option")
    for(let i = 0; i < option.length; i++){
        option[i].setAttribute("onclick", "optionSelected(this)")
    }
}

let tickIcon = '<div class="icon tick"><i class="fas fa-check"></i></div>'
let crossIcon = ' <div class="icon cross"><i class="fas fa-times"></i></div>'               

function optionSelected(answer){
    let userAns = answer.textContent
    let correctAns =  questions[que_count].answer
    let allOptions = option_list.children.length
    if(userAns === correctAns){
        answer.classList.add("correct")
        console.log("Answer is correct")
        answer.insertAdjacentHTML("beforeend", tickIcon)
    } else{
        answer.classList.add("incorrect")
        console.log("Answer is Wrong")
        answer.insertAdjacentHTML("beforeend", crossIcon)

        //if answers is incorrect then automatically selected the correct answer
        for(let i = 0; i < allOptions; i++){
            if(option_list.children[i].textContent === correctAns){
                option_list.children[i].setAttribute("class", "option correct")
                option_list.children[i].insertAdjacentHTML("beforeend", tickIcon)
            }    
        }
    }

    //once user selected disable all options
    for (let i = 0; i < allOptions; i++) {
        option_list.children[i].classList.add("disabled")
        
    }
}

function startTimer(time){
    counter = setInterval(timer, 1000)
    function timer(){
         timeCount.textContent = time
         time--
    }
}

function queCounter(index){
    
const bottom_ques_counter = quiz_box.querySelector(".total_que")
let totalQuesCountTag = "<span><p>" + index +"</p>of<p>"+ questions.length  + "</p>Question</span>"
bottom_ques_counter.innerHTML = totalQuesCountTag 
}
2

Describe in detail what you mean by “doesn’t work”.

3

this doesn’t work, it suppossed to countdown from 15 to 0

4

Can you show your full code? Preferably a Codepen, replit, or codesandbox llink.

5

https://codepen.io/spoonerboy/pen/VwBpeNr here, but questions in the visual studios code was in another .js file

6

When I look a the browser console after starting quiz and see the following error:

Uncaught TypeError: Cannot set properties of null (setting ‘textContent’)

What do you see when you put a console.log(timeCount) after the following line of code?

const timeCount = quiz_box.querySelector(".timer .timer_sec")
7

Appers this in my console.log
image
for a some reason this is wrong
image
but i can’t figured out the issue with

8 
function startTimer(time){
    counter = setInterval(timer, 1000)
    function timer(){
         timeCount.textContent = time  <-- this doesn't work
         time--
    }
}
9

You did not answer my last question.

10 
Uncaught TypeError: Cannot set properties of null (setting 'textContent')

The error is basically telling you that you are trying to assign a value to a property on null.

const nullObject = null;
nullObject.someProperty = 'some value';
// Uncaught TypeError: Cannot set properties of null (setting 'someProperty')

If you were trying to read from it you would get the read equivalent.

nullObject.someProperty;
// Uncaught TypeError: Cannot read properties of null (reading 'someProperty')

You are using textContent as a property in 3 places and only one of them is an assignment.

When querySelector returns null it means the selector didn’t match anything. So either the selector is wrong or the element just doesn’t exist.