JS querySelector ID with dynamic values-CodePudding

Im trying to make a simple quiz with a dynamic questions using Jinja (so a bit of python as well) some SQL JS.

Since im quite new to this, I was trying to do a simple "click here -> change color to green if your answer is the right one" Here's the thing: to not complicate things, i want every answer to change the color to red (if wrong) or green (if right). Right know, thanks to this thread Javascript getElementById based on a partial string i manage to create a function that turns the right answer to green wih the code, no matter where the user clicks (as long its inside the question box answers):

document.querySelector('[ id$="{{ question.correct_answer }}"]').style.backgroundColor="rgb(0, 221, 135)";

I thought i could do something like "id$!=" and that would solve my problem, but that didnt work. So i tried to search for other stuff like the :not or not() selectors, but that showed me a lot of jquery stuff, which im not studying/learning right now. So, is there any way to write: "if the id$ does not match the value {{ question.correct_answer }}, turn red" in plain JS?

Some important stuff about the code:

All answers have id="answer_a", "answer_b" etc.
That matches the way i save que "correct_answer" in the database, which comes exactly like the ID (so if the correct_answer is answer_d, i can call "{{ question.correct_answer }}" and that will always turn D into GREEN;
my HTML looks like <div class=question_answer id="answer_d" onclick="selecResposta()"> {{ question.answer_d }} </div> <br>. These are inside a DIV called "question_options" which i can also put the "onclick" function and everything works the same.

I can provide more information if necessary. Thanks a lot for the help and sorry if this is something easy to solve. Any guidance (if you dont wanna say the answer) is quite welcome as well.

UPDATE:

Thanks to @connexo and @Vijay Hardaha, i manage to mix both answers and create a code that helped me. It might not be pretty, but its doing what i want so its perfect. Here's the solution:

html part:

<div class=question_answer data-answer="answer_a"> {{ question.answer_a }} </div> <br> 
etc.etc

js:

function selecRightAnswer() {
                            document.querySelector("[data-answer={{ question.correct_answer }}]").style.backgroundColor="rgb(0, 221, 135)";
                        }
function selectWrongAnswer() {
const elements = document.querySelectorAll("div.question_answer:not([data-answer={{ question.correct_answer }}])");
elements.forEach(function (element) {
    element.style.backgroundColor = "red";
    });
}

CodePudding user response：

Selects div with class question_answer when div has id=answer_a with an exact match. document.querySelector("div.question_answer[id=answer_a]");

Selects div with class question_answer when div doesn't have id=answer_a with an exact match. document.querySelector("div.question_answer:not([id=answer_a])");

document.querySelector will only selector first matched div. so if you have to work with all unmatched with answer_a then you need to use document.querySelectorAll and then you'll have to loop reach element and work with each element inside the loop.

Example

const elements = document.querySelectorAll(".box");
elements.forEach(function (element) {
    element.style.color = "green";
});