Addeventlistener nested in a loop in javascript

I think that the following was your question/request -

let cities=["London","Paris","Berlin","Moscow"]
   let answer="Paris";<

Your array consists of 4 possible answers of which Paris is the correct answer, this will be returned via your loop

for(let i=1;i<=4;i++){

Counter created of 4 for the 4 possible answers and 4 div's that will return which answer were selected

let box=document.querySelector("#jstest"+i);

link each div to the correct item in your cities array

box.addEventListener("click",myfunction);

Once an element containing an answer is clicked on, your function is invoked to compare the answer to correct or incorrect, make your label green or red based on the answer. We need to add some checks to see if a selection were made when submit button is clicked. I had a sample from a while back for this specific topic which might help you out, please change to suit your needs. You can also find more information/tutorials at Codefinity

Here's an example of how you could build a simple online quiz app using HTML, CSS, and JavaScript that quizzes users on the names of different cities of the world, with four possible answers but only one correct answer:

HTML:

<div id="quiz">
  <h1>Cities of the World Quiz</h1>
  <p id="question"></p>
  <form id="answers">
    <label><input type="radio" name="answer" value="1" /><span id="answer1"></span></label>
    <br>
    <label><input type="radio" name="answer" value="2" /><span id="answer2"></span></label>
    <br>
    <label><input type="radio" name="answer" value="3" /><span id="answer3"></span></label>
    <br>
    <label><input type="radio" name="answer" value="4" /><span id="answer4"></span></label>
    <br>
    <button id="submit" onclick="checkAnswer()">Submit</button>
  </form>
  <p id="result"></p>
</div>

CSS:

#quiz {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.correct {
    color: green;
}

.incorrect {
    color: red;
}

JavaScript:

//Create the questions...
const questions = [
    {
        question: "What is the capital of France?",
        answers: {
            1: "Paris",
            2: "Rome",
            3: "Madrid",
            4: "Berlin"
        },
        correct: 1
    },
    {
        question: "What is the capital of Germany?",
        answers: {
            1: "Paris",
            2: "Rome",
            3: "Berlin",
            4: "Madrid"
        },
        correct: 3
    },
    {
        question: "What is the capital of Italy?",
        answers: {
            1: "Rome",
            2: "Paris",
            3: "Madrid",
            4: "Berlin"
        },
        correct: 1
    }
];

let currentQuestion = 0;

function setupQuestion() {
    document.getElementById("question").innerHTML = questions[currentQuestion].question;
    document.getElementById("answer1").innerHTML = questions[currentQuestion].answers[1];
    document.getElementById("answer2").innerHTML = questions[currentQuestion].answers[2];
    document.getElementById("answer3").innerHTML = questions[currentQuestion].answers[3];
    document.getElementById("answer4").innerHTML = questions[currentQuestion].answers[4];
}

//Start doing checks, i.e submitted, correct/incorrect, last question etc.
const submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", checkAnswer);

function checkAnswer() {
    let selected = document.querySelector('input[name="answer"]:checked');
    if (!selected) {
        alert("Please select an answer.");
        return;
    }
    let selectedAnswer = selected.value;
    if (selectedAnswer == questions[currentQuestion].correct) {
        document.getElementById("result").innerHTML = "Correct!";
        document.getElementById("result").classList.add("correct");
    } else {
        document.getElementById("result").innerHTML = "Incorrect";
        document.getElementById("result").classList.add("incorrect");
    }
    currentQuestion++;
    if (currentQuestion < questions.length) {
        setupQuestion();
    } else {
        alert("Quiz completed!");
    }
}

In this example, the addEventListener method is used to attach a click event to the submit button. When the button is clicked, the checkAnswer function is called. The function first checks if a radio button is selected, if not it will prompt the user to select an answer. Then it will check if the selected answer is correct or not. If the answer is correct, it will display "Correct!" with a green label and if the answer is not correct it will display "Incorrect" with red label, also it will increment the currentQuestion variable and check if there are more questions in the questions array if yes it will setup the next question if not it will display an alert message saying quiz completed.