CODEWITHSUNDEEP
javascripthtml
Krishna Kamal
Krishna Kamal

Reputation: 771

document.querySelector() does not working

Is there any dependency problem? because I am using the only pure javascript there is no jquery or anything. Using node.js
Here is my code

window.onload()=function(){
  var left=document.querySelector('.left');
  var right=document.querySelector(".right");

  var container=document.querySelector(".container");   
  console.log(left);
  left.addEventListener('mouseenter',()=>{
      container.classList.add('hover-left');

  })
  left.addEventListener('mouseleave', () => {
      container.classList.remove('hover-left');
  })
  right.addEventListener('mouseenter', () => {
      container.classList.add('hover-right');
  })
  right.addEventListener('mouseleave', () => {
      container.classList.remove('hover-right');
  })
}
<div class="container">
    <div class="split left">
        <h1>The Designer</h1>
        <a href="" class="button">Read more</a>
    </div>
    <div class="split right">
        <h1>The Programmer</h1>
        <a href="" class="button">Read more</a>
    </div>
</div>

Upvotes: 0

Views: 13750

Answers (3)

Sasi Kumar M
Sasi Kumar M

Reputation: 2630

If you have any static JS files being loaded in the tag in your html requesting to please load the JS at the end of the html body. Document wont be ready until the JS is loaded hence the document will be null.

Upvotes: 3

JorgeMadson
JorgeMadson

Reputation: 158

I got this error on Chrome:

Uncaught TypeError: window.onload is not a function

Removing the parentheses the error was gone.

But i didn't get how your page should work.

Look for more information here:

https://stackoverflow.com/questions/29927638/window-onload-work-but-chrome-console-says-uncaught-typeerror-window-onload-is

Upvotes: 1

rapgru
rapgru

Reputation: 378

If you select your DOM Elements with the CSS-Selector '.' for classes you get a list of elements instead of a single element which you can directly manipulate.

If left, right and container only appear once on your page, it's best to use ids:

JS:

window.onload=function(){
    var left=document.getElementById('left');
    var right=document.getElementById("right");

    var container=document.getElementById("container");   
    console.log(left);
    left.addEventListener('mouseenter',()=>{
        container.classList.add('hover-left');

    })
    left.addEventListener('mouseleave', () => {
        container.classList.remove('hover-left');
    })
    right.addEventListener('mouseenter', () => {
        container.classList.add('hover-right');
    })
    right.addEventListener('mouseleave', () => {
        container.classList.remove('hover-right');
    })
}

HTML:

<div id="container" class="container">
   <div class="split" id="left">
      <h1>The Designer</h1>
      <a href="" class="button">Read more</a>
   </div>
   <div class="split" id="right">
      <h1>The Programmer</h1>
      <a href="" class="button">Read more</a>
   </div>
</div>

Also as a comment above points out you mustn't use brackets when setting onload event.

Upvotes: 0

Related Questions