My time left doens't work

[franciscomonellole]

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 
}

[franciscomonellole]

@franciscomonellole

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

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

[franciscomonellole]

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

[franciscomonellole]

Appers this in my console.log

for a some reason this is wrong

but i can’t figured out the issue with

[franciscomonellole]

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

[lasjorg]

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.