EventListener is not work

Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>I need Help</title>
    <style media="screen">
    .try {
        padding: 3em;
        background: #B51C35;
        text-align: center;}
    .try a {
        display: inline-block;
        padding: 0 .5em;
        font-size: 2em;
        font-weight: 900;
        color: #FFFCED;
        text-decoration: none;
        border: 5px solid #FFFCED;}
    </style>
  </head>
  <body>
    <div class="">
      <h3 style="text-align:center;">The event in the console was worked but remove Attribute is not work!! <br />I just need the advice or if you can told me why is not working? </h3>
    </div>
    <div class="try movemaus">
      <a href="#">Book Now!</a>
    </div><!-- .cta -->

    <script>
      const NEWSTYLE = document.querySelector(".movemaus");
      NEWSTYLE.addEventListener('mouseleave', function(){NEWSTYLE.removeAttribute(".try");}, false);
      NEWSTYLE.addEventListener('mouseleave', function(){console.log("The Function is work in the Console");}, false);
    </script>
  </body>
</html>

Dear All, The event in the console was worked but remove Attribute is not work!! I just need the advice or if you can told me why is not working? Thanks in Advance, Mustafa

`removeAttribute` does what the name says, it removes actual _attributes_ from elements. There is no attribute named `.try` on any element. If you want to remove this single _class_ from an element … then go do some research, please, how that is done properly. — CBroe, Jul 02 '18 at 10:08

score 2 · Accepted Answer · answered Jul 02 '18 at 10:08

The event does work, but the approach to removing a class from an element is incorrect. Instead of removeAttribute, you could use element.classList.remove(className) to remove the class.

const NEWSTYLE = document.querySelector(".movemaus");
NEWSTYLE.addEventListener('mouseleave', function() {
  NEWSTYLE.classList.remove("try");
}, false);
NEWSTYLE.addEventListener('mouseleave', function() {
  console.log("The Function is work in the Console");
}, false);

.try {
  padding: 3em;
  background: #B51C35;
  text-align: center;
}

.try a {
  display: inline-block;
  padding: 0 .5em;
  font-size: 2em;
  font-weight: 900;
  color: #FFFCED;
  text-decoration: none;
  border: 5px solid #FFFCED;
}

<div class="">
  <h3 style="text-align:center;">The event in the console was worked but remove Attribute is not work!! <br />I just need the advice or if you can told me why is not working? </h3>
</div>
<div class="try movemaus">
  <a href="#">Book Now!</a>
</div>
<!-- .cta -->

Hello Nisarg, Thanks alot for the great support and the quick response. I'm a beginner in JavaScript and I try not to understand it good, to avoid the copy Paste from another developer. Thanks again, wish you a nice day. Mustafa — Mustafa Al Awad, Jul 02 '18 at 10:48

score 1 · Answer 2 · answered Jul 02 '18 at 10:08

1

removeAttribute removes the named attribute. The value you pass it should be an attribute name (like "class") and not a CSS selector (like .try).

If you want to remove a class from the element, then you should use the classList object.

NEWSTYLE.classList.remove("try");

answered Jul 02 '18 at 10:08

Quentin

914,110
126
1,211
1,335

Dear Quentin, Many thanks to wonderful explain. Wish you a nice day. Mustafa – Mustafa Al Awad Jul 02 '18 at 10:50

score -1 · Answer 3 · answered Jul 02 '18 at 10:09

-1

.try is a css class, not an attribute. You could remove the class attribute completely with removeAttribute, but not a single class out of the value. For this task you could use classList.

And why not combine the event listeners?!

document.querySelector(".movemaus").addEventListener('mouseleave', e => {
  e.target.classList.remove("try");
  console.log("The Function is work in the Console");
});

.try {
  padding: 3em;
  background: #B51C35;
  text-align: center;
}

.try a {
  display: inline-block;
  padding: 0 .5em;
  font-size: 2em;
  font-weight: 900;
  color: #FFFCED;
  text-decoration: none;
  border: 5px solid #FFFCED;
}

<div class="">
  <h3 style="text-align:center;">The event in the console was worked but remove Attribute is not work!! <br />I just need the advice or if you can told me why is not working? </h3>
</div>
<div class="try movemaus">
  <a href="#">Book Now!</a>
</div>

answered Jul 02 '18 at 10:09

eisbehr

12,243
7
38
63

Hi Eisbehr, Many thanks for the explain. I will try that now with the .toggle :) Thanks again. Mustafa – Mustafa Al Awad Jul 02 '18 at 10:44
1

Hi again, I didn't knew that I can combine it, when I read your modification agine I understand your point of view. am a beginner in JS and I like coding, but now I find it complicated but I thing it will come. I just need to know according to your experience in this website: my question is normal or this website just for the professional ? Thanks for your time and wish you a nice day. Mustafa – Mustafa Al Awad Jul 02 '18 at 11:06
I think I don't understand your question?! @MustafaAlAwad – eisbehr Jul 02 '18 at 11:12
my post or my question for the event not work that normal question or this website for the propositional coder more than the beginner. – Mustafa Al Awad Jul 02 '18 at 11:27
SO is for both, beginner and pros. But to be honest, you should not use comments for ask things like this. Use https://meta.stackoverflow.com for such questions. – eisbehr Jul 02 '18 at 11:28
Thanks for the good advice. you know we must ask to know where is the right platform to ask in it. – Mustafa Al Awad Jul 02 '18 at 11:40

EventListener is not work

3 Answers3