Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' из null (querySelector)

Question

Я получаю следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство addEventListener со значением NULL

addEventListener отлично работает на одном идентификаторе (меню) ... Есть ли ограничение, что я не могу использовать его в querySelector?

(Да, JavaScript находится внизу документа HTML)

Любой Помощь будет оценена.

https://plnkr.co/edit/AIAOZk40ssoofpvrt9dm?p=preview

var menu = document.getElementById("menu");
var area = document.querySelector("#menu + #envelope + #links");

menu.addEventListener("mouseenter", addHref);
area.addEventListener("mouseleave", remHref);

menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
    if (this != area){
        remHref();
    }
});

function remHref (){
    document.getElementById("google").removeAttribute("href");
    document.getElementById("mysite").removeAttribute("href");
}

function addHref (){
    setTimeout(activate, 2500);
}

function activate (){
    document.getElementById("google").setAttribute("href", "https://www.google.com");
    document.getElementById("mysite").setAttribute("href", "https://www.mywebsite.com");
}

    <div id="menu">Click here to browse the internet.
        <div id="envelope">
            <div id="links" >
                <div><a ><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a></div>
                <div style="width: 20%;"></div>
                <div><a ><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></a></div>
            </div>
        </div>
    </div>

#menu{
    height: 10vh;
    background-color: red;
    text-align: center;
    transition: all 1s ease-out;
    padding-top: 5vh;
}

#menu:hover{
    color: red;
}

#envelope{
    height: 0;
    display: block;
    visibility: hidden;
    background-color: blue;
    min-width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    content: "";
    opacity: 0;
    transition: all 1.3s ease-out;
}

#links{
    height: 0;
    visibility: hidden;
    display: flex;
    background-color: pink;
    justify-content: center;
    z-index: 2;
    min-width: 100%;
    opacity: 0;
    transition: all 1s ease-in;
}


#google{
    margin-top: -1vh;
    width: 150px;
}

#mysite{
    padding-left: 5%;
    margin-top: -1vh;
    width: 150px;
}

#menu:hover #envelope{
    height: 100px;
    opacity: 1;
    visibility: visible;
}

#menu:focus #envelope{
    height: 100px;
    opacity: 1;
    visibility: visible;
}

#menu:hover #links{
    opacity: 1;
    height: 300px;
    visibility: visible;
}

#menu:focus #links{
    opacity: 1;
    height: 300px;
    visibility: visible;
}

Answer 1

Ваш код в порядке, вам нужно просто:

• Поместить скрипт перед закрытием тега </body>.

• Исправить элемент querySelector fo область от "#menu + #envelope + #links" до "#menu #envelope #links"

Пример:

// Code goes here


var menu = document.getElementById("menu");
var area = document.querySelector("#menu #envelope #links");

menu.addEventListener("mouseenter", addHref);
area.addEventListener("mouseleave", remHref);

menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
	if (this != area){
		remHref();
	}
});

function remHref (){
	document.getElementById("google").removeAttribute("href");
	document.getElementById("mysite").removeAttribute("href");
}

function addHref (){
	setTimeout(activate, 2500);
}


function activate (){
	document.getElementById("google").setAttribute("href", "https://www.google.com");
	document.getElementById("mysite").setAttribute("href", "https://www.mywebsite.com");
}

/* Styles go here */

#menu{
	height: 10vh;
	background-color: red;
	text-align: center;
	transition: all 1s ease-out;
	padding-top: 5vh;
}

#menu:hover{
	color: red;
}

#envelope{
	height: 0;
	display: block;
	visibility: hidden;
	background-color: blue;
	min-width: 100%;
	z-index: 1;
	position: absolute;
	left: 0;
	content: "";
	opacity: 0;
	transition: all 1.3s ease-out;
}

#links{
	height: 0;
	visibility: hidden;
	display: flex;
	background-color: pink;
	justify-content: center;
	z-index: 2;
	min-width: 100%;
	opacity: 0;
	transition: all 1s ease-in;
}


#google{
	margin-top: -1vh;
	width: 150px;
}

#mysite{
	padding-left: 5%;
	margin-top: -1vh;
	width: 150px;
}

#menu:hover #envelope{
	height: 100px;
	opacity: 1;
	visibility: visible;
}

#menu:focus #envelope{
	height: 100px;
	opacity: 1;
	visibility: visible;
}

#menu:hover #links{
	opacity: 1;
	height: 300px;
	visibility: visible;
}

#menu:focus #links{
	opacity: 1;
	height: 300px;
	visibility: visible;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="menu">Click here to browse the internet.1
        <div id="envelope">
            <div id="links">
                <div>
                    <a><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a>
                </div>
                <div style="width: 20%;"></div>
                <div>
                    <a><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png" /></a>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Answer 2

Я отредактировал ваш план в соответствии с 2 небольшой ошибкой, которую вы допустили.

Первая ошибка заключалась в том, чтобы включить скрипт в тег. я вставил перед закрывающим тегом

Кроме того, как уже упоминалось, @jeprubio вам нужно удалить '+' из вызова querySelector ().

Вот отредактированный план

https://plnkr.co/edit/sB7r0MguCN3KvhdHvB4i

код

// Код идет сюда

var menu = document.getElementById("menu");
var area = document.querySelector("#menu #envelope #links");

menu.addEventListener("mouseenter", addHref);
area.addEventListener("mouseleave", remHref);

menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
    if (this != area){
        remHref();
    } 
});

function remHref (){
    document.getElementById("google").removeAttribute("href");
    document.getElementById("mysite").removeAttribute("href");
}

function addHref (){
    setTimeout(activate, 2500);
}

function activate (){
    document.getElementById("google").setAttribute("href", "https://www.google.com");
    document.getElementById("mysite").setAttribute("href", "https://www.mywebsite.com");
}

Answer 3

Попробуйте изменить:

var area = document.querySelector("#menu + #envelope + #links");

для:

var area = document.querySelector("#menu #envelope #links");

Как ваш html:

<div id="menu">Click here to browse the internet.
   <div id="envelope">
      <div id="links" >
         ...
      </div>
   </div>
</div>

element+element selector (Селектор соседнего брата ) используется для выбора элементов, которые размещаются сразу после ( не внутри ) первого указанного элемента. Вам нужен Descendant Selector или Child Selector.

Посмотрите на w3cschools CSS Combinators .

Или, в этом случае и, как говорит epascarello, вы можно просто использовать:

var area = document.querySelector("#links");

, поскольку идентификаторы должны быть уникальными, если документ подтвержден.

Answer 4

Оберните ваш Javascript в window.onload ()

window.onload=function() {
   /*your code here*
   /*var date = document.getElementById("date");
   /*alert(date);
}

Похоже, что браузер выполняет ваш JavaScript до того, как он "выполнил ваш HTML" / создал страницу, поэтому эти HTML элементы / узлы DOM еще не существуют. Это вводит задержку до загрузки HTML, так что узлы существуют (не нулевые) до того, как JavaScript попытается присоединить к ним методы. (И то, что jprubio сказал ниже о вашем селекторе.)