EventListener is not work [duplicate]
EventListener is not work [duplicate]
This question already has an answer here:
<!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
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
removeAttribute
.try
Thx for replay and advice for search!!
– Mustafa Al Awad
Jul 2 at 10:56
3 Answers
3
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.
removeAttribute
element.classList.remove(className)
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 2 at 10:48
removeAttribute removes the named attribute. The value you pass it should be an attribute name (like "class") and not a CSS selector (like .try).
removeAttribute
"class"
.try
If you want to remove a class from the element, then you should use the classList object.
classList
NEWSTYLE.classList.remove("try");
Dear Quentin, Many thanks to wonderful explain. Wish you a nice day. Mustafa
– Mustafa Al Awad
Jul 2 at 10:50
.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.
.try
class
removeAttribute
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>
Hi Eisbehr, Many thanks for the explain. I will try that now with the .toggle :) Thanks again. Mustafa
– Mustafa Al Awad
Jul 2 at 10:44
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 2 at 11:06
I think I don't understand your question?! @MustafaAlAwad
– eisbehr
Jul 2 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 2 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 meta.stackoverflow.com for such questions.
– eisbehr
Jul 2 at 11:28
removeAttributedoes what the name says, it removes actual attributes from elements. There is no attribute named.tryon 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 2 at 10:08