document.querySelector() 不起作用

Question

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>

Answer 1

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

Answer 2

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.

Answer 3

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.