not sure why console log is not working under event listener function-CodePudding

below is JS code for simple multiplication app, here my question is why console log available in event listener function is not working

also updating a span element (ScoreEl) within the function also is not getting displayed after a moment hence I put that statement after the function.

const scoreEl = document.querySelector(".score");
const questionEl = document.querySelector(".question");
const inputEl = document.querySelector("input");
const formEl = document.getElementById("form");
const btnEl = document.querySelector(".btn");

let score = JSON.parse(localStorage.getItem("score")) || 0;

var num1 = Math.floor(Math.random()*10);
var num2 = Math.floor(Math.random()*10);

var correctAnswer = num1 * num2;

questionEl.textContent = `What is ${num1} mutiply by ${num2}?`


btnEl.addEventListener("click", function(){

    var userAnswer = inputEl.value;

    console.log(userAnswer);

    if (correctAnswer === parseInt(userAnswer)){

        score  = 1;
    }else{

        score -= 1;
    }

    localStorage.setItem("score",JSON.stringify(score))
    //scoreEl.textContent = "Score : "   score

});

scoreEl.textContent = "Score : "   score

I am expecting the console log for the event listener working to debug and my "scoreEl" should be displayed after the function execution.

not sure why it is not working as per my expectation.

CodePudding user response：

To get HTML tags from your document, you must wait until it is ready with :

document.addEventListener("DOMContentLoaded", initFunction);

function initFunction(evt){
    // then you can use document.getX
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

An event listener is asynchronous so scoreEl.textContent = "Score : " score will be called before your button is clicked.

You should put that code at the end of your anonymous function that is called by your eventListener.

You probably better make a non-anonymous function and get tags needed from here, if you don't need it before.

CodePudding user response：

@Ashik Could you try setting the eventListener on the onl oad of the script.

window.onload = function(){  
const btnEl = document.querySelector(".btn");
btnEl.addEventListener("click", function(){

    var userAnswer = inputEl.value;

    console.log(userAnswer);

    if (correctAnswer === parseInt(userAnswer)){

        score  = 1;
    }else{

        score -= 1;
    }

    localStorage.setItem("score",JSON.stringify(score))
    //scoreEl.textContent = "Score : "   score

});

const scoreEl = document.querySelector(".score");
const questionEl = document.querySelector(".question");
const inputEl = document.querySelector("input");
const formEl = document.getElementById("form");

let score = JSON.parse(localStorage.getItem("score")) || 0;

var num1 = Math.floor(Math.random()*10);
var num2 = Math.floor(Math.random()*10);

var correctAnswer = num1 * num2;

questionEl.textContent = `What is ${num1} mutiply by ${num2}?`

also what is "form" element you can also paste HTML for better understanding.

CodePudding user response：

Make sure the listener is properly bonded, I mean it is actually listening to the event and you are triggering that particular event. Since console.log() is pre-defined in javascript and doesn't require any other stuff. So it should work. Or you can do the same as mentioned by ritesh-kumar, add console.log() on the load event of dom.