Javascript: Eventhandler не работает, работает в JSFiddle

Так что это ответ на другой вопрос, который я опубликовал, и я думаю, что это правильное решение. Однако, хотя он отлично работает в jsfiddle, он не функционирует вне среды. Я пробовал несколько комбинаций, и я не могу заставить эту штуку работать правильно.Javascript: Eventhandler не работает, работает в JSFiddle

Я пробовал onLoad в теле, Window.onload как в заголовке, обертывающем функцию, так и отдельно вызывающем ее в базе страницы после загрузки всех элементов. Ничего не работает.

Я всегда получаю этот вопрос:

Uncaught TypeError: Cannot call method 'addEventListener' of null

Что расстраивает, потому что все другие решения этой ошибки я видел вращаются вокруг обеспечения вы на самом деле имеют заданный идентификатор обработчик вызывает выключение в вашем HTML , Что я делаю.

Я знаю, что его, вероятно, излишний, чтобы сделать сообщение здесь, но я дергаю свои волосы.

Вот JSfiddle: http://jsfiddle.net/fFW5r/1/

Вот макет страницы я сделал, чтобы проверить концепцию (которая никогда не работает):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript"> 
    var link_container = document.getElementById('links'); 
    function myFunction(){ link_container.addEventListener('click', function(e){ 
     if(e.target.nodeName === "A"){ 
      var href = e.target.getAttribute('href'), 
       selfhost = window.location.hostname; 
      if(href.indexOf(selfhost) !== -1){ 
       alert('Inbound link clicked'); 
      } else { 
       alert('Outbound link clicked'); 
      } 
     } 
    }, false); 
    } 
</script> 
</head> 

<body onload="myFunction()"> 

<div id="links"> 
    <a href="http://fiddle.jshell.net/#foo">Inbound Link</a> 
    <a href="http://stackoverflow.com">Outbout Link</a> 
</div> 

<script>window.onload=myFunction()</script> 
</body> 
</html>

Данный итерация я пытался проверить его с onload вызова на внизу страницы после загрузки.

источник

2013-03-08 Michael Watson

var link_container = document.getElementById('links'); нужно выполнить на document.onload поэтому он должен быть внутри myFunction

В jsfiddle, код выполняется на load по умолчанию. в скрипке на левой боковой панели> второй флажок выбора, если вы выберете no wrap - in head, вы можете воссоздать проблему. Демо: Fiddle

<script type="text/javascript"> 

    function myFunction(){ 
     var link_container = document.getElementById('links'); // <<-- Move it inside `myFunction()` 
     link_container.addEventListener('click', function(e){ 
     if(e.target.nodeName === "A"){ 
      var href = e.target.getAttribute('href'), 
       selfhost = window.location.hostname; 
      if(href.indexOf(selfhost) !== -1){ 
       alert('Inbound link clicked'); 
      } else { 
       alert('Outbound link clicked'); 
      } 
     } 
    }, false); 

    } 
</script>

источник

2013-03-08 17:44:32

См.? Я знал, что вы, ребята, посмотрите на него и пойдете «ничего себе, это легко». Спасибо тысячу Арун. Теперь я должен ждать 9 минут, чтобы принять ваш ответ lol. –

Элемент еще не существует, когда вы запускаете скрипт. Вышеупомянутый ответ должен решить эту проблему. –

@MichaelWatson fiddle воссоздать проблему http://jsfiddle.net/arunpjohny/fFW5r/3/ –

Причина, по которой не работает, что вы инициализация link_container до DOM готов. Затем, когда myFunction() запускается, link_container инициализирован до неопределенного. Это заставляет его потерпеть неудачу. Инициализация в функции (после загрузки DOM) должна исправить проблему

Поместите объявление link_container внутри функции.

var link_container = document.getElementById('links'); 

function myFunction(){ 
    link_container.addEventListener('click', function(e){ 
     if(e.target.nodeName === "A"){ 
      var href = e.target.getAttribute('href'), 
       selfhost = window.location.hostname; 
      if(href.indexOf(selfhost) !== -1){ 
       alert('Inbound link clicked'); 
      } else { 
       alert('Outbound link clicked'); 
      } 
     } 
    }, false); 
}

источник

2013-03-08 17:47:27

Javascript: Eventhandler не работает, работает в JSFiddle

ответ

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