свойство 'addEventListener' от null на mouseover

У меня есть кнопка на моей странице, что, когда я нажимаю на меня, я хотел бы изменить цвет фона на красный. Я получаю эту ошибку:свойство 'addEventListener' от null на mouseover

Не удается прочитать свойство 'addEventListener' нулевых

HTML

<button type="button" id="dev" onclick="visibility()">Visibility</button>

Javascript

var ditto = document.getElementById("dev"); 
ditto.addEventListener("mouseover", buttonColor); 

function buttonColor(){ 
    document.getElementById("dev").style.backgroundColor = "red"; 
}

вот что я думал, что я делаю:

создал переменную для конкретного элемента, которого я хотел. Затем добавьте eventlistener к этому элементу для «mouseover», который вызовет функцию buttonColor. buttonColor изменит цвет фона кнопки.

какой я сделал неправильно?

изменить: my js - это внешний файл. Мне нужно использовать событие lisenter для задания домашней работы.

источник

2015-09-19 kronis72

Добавьте этот сценарий в нижней части 'body' элемента или использовать' обработчик события DOMContentLoaded' если скрипт находится в 'head' элемента – Tushar

мой скрипт на самом деле является внешним файлом – kronis72

И я предполагаю, что вы включили его в элемент 'head' – Tushar

Попробуйте удалить эту часть

var ditto = document.getElementById("dev"); 
ditto.addEventListener("mouseover", buttonColor);

И добавив onmouseover="buttonColor()" так же, как вы делали с visibility() как так

<button type="button" id="dev" onmouseover="buttonColor()" onclick="visibility()">Visibility</button>

Edit:

Как и другие отметили, что в комментариях, проблема в том, что ваш HTML еще не загружен, когда код, который я предложил удалить, фактически запущен s

Вы можете перемещать скрипт в конце <body> поэтому выполняется после button на странице

источник

2015-09-19 04:55:47 JSelser

Я должен был сказать это, но я должен использовать событие lisenter, поскольку это для домашней цели – kronis72

............. :( – JSelser

И изменение внешнего JS для inline не Отличная практика в любом случае. – Shikkediel

HTML

<button type="button" id="dev" onmouseover="overColor()" onmouseout="normalColor()">Visibility</button>

Javascript

function overColor(){ 
    document.getElementById("dev").style.backgroundColor = "red"; 
} 

function normalColor(){ 
    document.getElementById("dev").style.backgroundColor = "white"; 
}

Объяснение

Окно onClick срабатывает при нажатии кнопки, вам это не нужно.

mouseOver Событие запускается, когда ваша мышь находится в зоне кнопок, и это то, что вам нужно здесь.

mouseOut Событие увольняется, когда ваша мышь покидает область кнопки.

источник

2015-09-19 05:00:00

Я отредактировал свой оригинальный вопрос, я должен использовать eventlisenter, а onclick - для другой функции. – kronis72

. Вы должны обратиться к комментарию Тушара. Он отвечает на ваш вопрос. Пожалуйста, будьте осторожны, чтобы описать, чего вы хотите достичь именно в future :) –

ваш код работает корректно без ошибок. я снова запустил на скрипке вот моя скрипка here

предоставьте свою скрипку, в которой вы сталкиваетесь с той же ошибкой. Я могу вам помочь.

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

вот мой JS

var ditto = document.getElementById("dev"); 
ditto.addEventListener("mouseover", buttonColor); 
ditto.addEventListener("mouseout", buttonColorOut); 
ditto.addEventListener("click", click); 

function buttonColor(){ 
    document.getElementById("dev").style.backgroundColor = "red"; 
} 

function buttonColorOut(){ 
    document.getElementById("dev").style.backgroundColor = "white"; 
} 

function click(){ 
    alert("clicked"); 
} 
function visibility(){ 
    alert("clicked"); 
}

и HTML является

<button type="button" id="dev" onclick="visibility()">Visibility</button>

источник

2015-09-19 05:13:23

Хотя он может работать в jsfiddle, он не работает, когда я просматриваю свой браузер. W firebug Я не получаю ошибок, просто не работает правильно и в chrome, я получаю нулевую ошибку, как указано выше, Im путается, почему она будет работать в jsfiddle, но не локально. По-видимому, комментарий tushar заключается в том, как решить проблему, но я не понимаю, как использовать обработчик событий DOMContentLoaded, все еще пытаясь понять это. – kronis72

извините, я не понимаю, где именно вы получаете ошибку в своем коде, хотя у меня также есть использовал хром для проверки, но в моем случае он работает нормально. –

вы можете обратиться к этому вопросу для DOMcontentLoad, возможно, это поможет вам разобраться в вашей ошибке http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events –

свойство 'addEventListener' от null на mouseover

ответ

Смежные вопросы