# Javascript on event listener click not working

**URL:** <https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [May 7, 2021, 7:18pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299 "2021-05-07T19:18:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![novella](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/novella/32/213833_2.png) [@novella](https://forum.freecodecamp.org/u/novella)\
**Post date:** [May 7, 2021, 7:18pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/1 "2021-05-07T19:18:14Z")

</div>

I have this code to show a modal.

```auto
  var quotebtn = document.querySelector("#quoteBtn");
  quotebtn.addEventListener("click", function () {
    document.querySelector("#getaquote").css({ "opacity": "0" });
  });

```

With the html syntax:

```auto
    <div class="flex justify-center w-full">
        <a href="javascript:;" id="quoteBtn" class="primary-btn mt-16">Get a quote</a>
    </div>
</div>

```

For some reason it isn’t working.

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 7:24pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/2 "2021-05-07T19:24:58Z")

</div>

I think it’s not working because the browser processed the javascript file before the HTML and at that time, there wasn’t any element with that id. Open up your console(developer tools) and have a look what it says.

---

<div class="post-metadata">

**Author:** ![novella](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/novella/32/213833_2.png) [@novella](https://forum.freecodecamp.org/u/novella)\
**Post date:** [May 7, 2021, 7:25pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/3 "2021-05-07T19:25:59Z")

</div>

![image](https://global.discourse-cdn.com/freecodecamp/original/3X/f/9/f97370ff9e305f679234b97874cd6c3623d4907b.png)

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 7:28pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/4 "2021-05-07T19:28:46Z")

</div>

It appears the code did not procced due to another error.  
You’re accessing `handleSubmit` before you declared it.

---

<div class="post-metadata">

**Author:** ![novella](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/novella/32/213833_2.png) [@novella](https://forum.freecodecamp.org/u/novella)\
**Post date:** [May 7, 2021, 7:32pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/5 "2021-05-07T19:32:20Z")

</div>

I removed the code causing the error and now there are no console errors, however the `onclick event` still does not work.

---

<div class="post-metadata">

**Author:** ![novella](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/novella/32/213833_2.png) [@novella](https://forum.freecodecamp.org/u/novella)\
**Post date:** [May 7, 2021, 7:34pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/6 "2021-05-07T19:34:30Z")

</div>

Just added an alert to the `onclick` and it fired like normal, seems there must be an issue with ` document.querySelector("#getaquote").css({ "opacity": "0" });`

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 7:40pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/7 "2021-05-07T19:40:08Z")

</div>

I’m afraid you cannot change the css property of HTML element as it does not exist. You can however change its style property.

```auto
 document.querySelector("#getaquote").style.opacity = 0;

```

---

<div class="post-metadata">

**Author:** ![novella](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/novella/32/213833_2.png) [@novella](https://forum.freecodecamp.org/u/novella)\
**Post date:** [May 7, 2021, 7:42pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/8 "2021-05-07T19:42:05Z")

</div>

Thank you very much, is there any way to add more styles in one statement?

e.g.

```auto
 document.querySelector("#getaquote").style.opacity = 0 + display = none;

```

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 7:44pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/9 "2021-05-07T19:44:55Z")

</div>

But I know where you are coming from. This `element.css()` is from jQuery library.  
In that case you would need to select it as:

```auto
$("#getaquote").css({ "opacity": "0", ... });

```

$(selector) and document.querySelector(selector) are two different things.

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 7:49pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/10 "2021-05-07T19:49:41Z")

</div>

If you’re using jQuery in your project, just stick with it and don’t mix it with browser native querySelector method.

> [@novella](#):
>
> `document.querySelector("#getaquote").style.opacity = 0 + display = none;`

This syntax breaks my ❤ .

---

<div class="post-metadata">

**Author:** ![novella](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/novella/32/213833_2.png) [@novella](https://forum.freecodecamp.org/u/novella)\
**Post date:** [May 7, 2021, 7:52pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/11 "2021-05-07T19:52:39Z")

</div>

Thanks for your help.

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 8:12pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/12 "2021-05-07T20:12:42Z")

</div>

jQuery was made to make our lifes easier. I’ve never worked with it, however, I believe that in the background it changes elements style properties one by one as you’d have to.

```auto
document.querySelector("#getaquote").style.opacity = value;
document.querySelector("#getaquote").style.display = value;
...
...

```

or you could write your own function to achieve the same result…  
I’ll try here just for fun.

```auto
function setStyles(selector, styles = {}) {
    const element = document.querySelector(selector);
    for (const [key, value] of Object.entries(styles)) {
        element.style[key] = value;
    }
}
setStyles("body", {"backgroundColor": "purple"})

```

You can copy paste this and run it in your browser’s console for example.

---

<div class="post-metadata">

**Author:** ![Dorfieeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorfieeee/32/227019_2.png) [@Dorfieeee](https://forum.freecodecamp.org/u/Dorfieeee)\
**Post date:** [May 7, 2021, 8:13pm UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/13 "2021-05-07T20:13:40Z")

</div>

Is everything working as you want now?

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 6, 2021, 8:13am UTC](https://forum.freecodecamp.org/t/javascript-on-event-listener-click-not-working/459299/14 "2021-11-06T08:13:41Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.