JS querySelector + ID with dynamic values

Question

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";
    });
}

You cannot have more than one element in a page with any given `id`. `id` **must be unique per-document**. Use a data-attribute instead: `data-answer="d"`. Access via JS with `el.dataset.answer`. — connexo, Aug 24 '22 at 22:59
@connexo thanks for clarification. While i was learning about attributes, i understood that i could have multiple ID, *IF* they are different, per document. Ill try to use data-answer — Tiivo, Aug 24 '22 at 23:19
Hey Connexo, i just updated the post with my solution. Its probably not using data-attribute like you wanted to teach me, but hey, its working and its using data hahhah — Tiivo, Aug 25 '22 at 00:23

score 0 · Accepted Answer · answered Aug 24 '22 at 23:04

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";
});

I tried that before and it didnt work, but i probably did something wrong. If connexo's recommmendation doesnt work, ill come back to this one. Thanks Vijay! — Tiivo, Aug 24 '22 at 23:36
Thanks for the help Vijay, your for loop explanation combined with the data-attribue was exactly what i need! — Tiivo, Aug 25 '22 at 00:23

JS querySelector + ID with dynamic values

1 Answers1

Example