CODEWITHSUNDEEP
javascripthtml
Blue
Blue

Reputation: 73

Simple Javascript removing class

I am trying to remove a class on mouseenter with Javascript. Can people explain whats causing it not to work? I am new to JS. The function works with an Alert so i know the function is working so it must be the remove class line thats causing the problem.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
 </head>
 <body>
    <div class="container">
       <div class="left-filter">
         <div class="left">
           <h1 class="heading1">hi</h1>
           <a href="" class="landing-btn">Shop</a>
         </div>
       </div>
    </div>

    <script>
    var left = document.querySelector('.left');
    var container = document.querySelector('container');
    left.addEventListener('mouseenter', function(){
    container.classList.remove('.left-filter');
    })
    </script>
    </body>
    </html>

Upvotes: 0

Views: 52

Answers (2)

Muhammad Usman
Muhammad Usman

Reputation: 10148

container.classList.remove('.left-filter'); should be container.classList.remove('left-filter');

you only mention the name of the class in remove to remove the class. Not with .

Moreover document.querySelector('container'); should be document.querySelector('.container');

On a side note. If there are more than one elements with class .container, document.querySelector('.container') will only select the first one.

If you want to attach events to all of those elements, you'll have to use document.querySelectorAll('.container') , this will give you the node list and you'll have to loop through this list to attach events to all of the nodes

Upvotes: 2

Elias Soares
Elias Soares

Reputation: 10254

Your selector for container is wrong. You are missing a . before the selector:

var container = document.querySelector('.container');
                                        ^
                                        |
                                        ---- This dot was missing

The dot indicates that you are selecting a element by the class. Without it, javascript was searching for a element named container.

Also the line that removes the class is wrong, the . is not needed here:

container.classList.remove('left-filter');

Upvotes: 2

Related Questions