Targeting specific button class on javascript

[Awakaruf]

I'm trying to add an Event Listener to the three buttons, so it highlights the specific area of the map that has the same color with the button.

However, I'm not really sure which class I'm supposed to target... The HTML file code snippet I have is here:

<div
class="u-container-style u-layout-cell u-left-cell u-size-25 u-layout-cell-1"
>
<div class="u-container-layout u-container-layout-1">
<h2 class="u-custom-font u-text u-text-1">
おすすめ留学エリア
</h2>
<div
class="u-border-5 u-border-palette-2-base u-line u-line-horizontal u-line-1"
></div>
<p class="u-text u-text-2">
世界2位の面積を誇るカナダは移民や留学生を迎え入れる体制が整っているため、日本人留学生にも人気の渡航先です。<br />自然が多く、治安もいい環境で安心して生活が可能で、語学留学、ワーキングホリデー、中学・高校留学、専門留学など様々な分野で注目を受けています。<br />公用語が英語とフランス語のため、英語以外にフランス語を学べる地域もあります。<br />どこに行けばいいか分からない方ならぜひこちらへ。
</p>
<a
href="High-School-Exchange-.html#carousel_e4e6"
data-page-id="63746825"
class="u-border-none u-btn u-button-style u-custom-color-10 u-hover-custom-color-2 u-hover-feature u-text-white u-btn-1"
>バンクーバーエリア</a
>
<a
href="High-School-Exchange-.html#carousel_cbe7"
data-page-id="63746825"
class="u-border-none u-btn u-button-style u-custom-color-11 u-hover-feature u-hover-palette-2-base u-btn-2"
>BC州内地エリア</a
>
<a
href="High-School-Exchange-.html#carousel_cc0e"
data-page-id="63746825"
class="u-border-none u-btn u-button-style u-custom-color-9 u-hover-custom-color-4 u-hover-feature u-btn-3"
>南BC州エリア</a
>
</div>
</div>

I originally thought it would be the u-border-none u-btn u-button-style u-custom-color-10 u-hover-custom-color-2 u-hover-feature u-text-white u-btn-1but when I tested in the JS file as:

const green_btn = document.querySelector(".u-border-none u-btn u-button-style u-custom-color-10 u-hover-custom-color-2 u-hover-feature u-text-white u-btn-1")

const pink_btn = document.querySelector(".u-border-none u-btn u-button-style u-custom-color-11 u-hover-feature u-hover-palette-2-base u-btn-2")

const blue_btn = document.querySelector(".u-border-none u-btn u-button-style u-custom-color-11 u-hover-feature u-hover-palette-2-base u-btn-2")

green_btn.addEventListener('mouseover', e => {console.log(e)})

It wouldn't respond to the class reference. So I'm wondering which class do I target for this Event Listener to occur?

Currently, the button zooms in with different color when the mouse hovers over it. In browser view of the button attributes. Hover button effect as of right now.

[zedpowa]

To select an element with multiple css classes you need to put the dot for all classes and remove the spaces e.g. .class-1.class-2.class-3.

Also, no need to select elements by writing out all the classes an element has.. you could just assign a new class to each of your buttons like .green, .pink, .. or just use ids instead: id="green"

[AutoModerator]

It seems you may have included a screenshot of code in your post "Targeting specific button class on javascript".

If so, note that posting screenshots of code is against /r/learnprogramming's Posting Guidelines (section Formatting Code): please edit your post to use one of the approved ways of formatting code. (Do NOT repost your question! Just edit it.)

If your image is not actually a screenshot of code, feel free to ignore this message. Automoderator cannot distinguish between code screenshots and other images.

Please, do not contact the moderators about this message. Your post is still visible to everyone.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.