Мое событие обмена не стреляет! Непонятно, почему

Question

Я пытаюсь изменить свойство .innerText первого a, если выбранное значение option равно 1. Я не вижу никаких ошибок в консоли и попытался переместить мой скрипт вокруг, чтобы узнать, не изменит ли это что-либо , но это не так. Прямо сейчас мой сценарий находится в конце тела.

Почему это не работает ?!

демо: http://jsfiddle.net/L2gm9/1/

HTML:

<div id="container"> 
    <ol> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
     <li><a href="#">This is the first link</a></li> 
    </ol> 
    <select id="numbers"> 
     <option>Select</option> 
     <option value=1>1</option> 
     <option value=2>2</option> 
     <option value=3>3</option> 
     <option value=4>4</option> 
    </select> 
</div> 

JS:

(function(){ 
    "use strict"; 

    var select = document.getElementById("element"), 
     option = select.firstElementChild; 


    select.addEventListener("onchange", function(){ 

      var div = document.getElementById("hook"), 
       ol = div.firstElementChild, 
       li = ol.firstElementChild, 
       a = li.firstElementChild; 

      console.log(a); 

      if(select.children[1].innerText === 1) 
        a.innerText = "This is the first element"; 
    }, false); 

})(); 

Answer 1

глядя на скрипку и консоли, вы увидите сообщение об ошибке Uncaught TypeError: Cannot read property 'firstElementChild' of null

Ошибка вызванное вызовом функции до того, как элемент будет равен на странице.

window.onload = (function(){ 

    "use strict"; 

    var select = document.getElementById("element"), 
     option = select.firstElementChild; 

    select.addEventListener("onchange", function(){ 

      var div = document.getElementById("hook"), 
       ol = div.firstElementChild, 
       li = ol.firstElementChild, 
       a = li.firstElementChild; 
       console.log(a); 

      if(this.children[0].value === 1) 
        a.innerHTML = "This is the first element"; 
    }, true); 


})(); <-- executes the function and assigns result to unload handler 

Вы хотите удалить ()

Теперь следующий вопрос вы используете addEventListener неправильно. Вы не используете «on» в названии события. Также не все браузеры поддерживают его.

select.addEventListener("change", function(){ 

Answer 2

Попробуйте сделать актуальной Javascript функция, а затем добавить OnChange атрибут элементов в HTML:

function ChangeText() { 
    var div = document.getElementById("hook"), 
    ol = div.firstElementChild, 
    li = ol.firstElementChild, 
    a = li.firstElementChild; 

    console.log(a); 

    if(select.children[1].innerText === 1) { 
    a.innerText = "This is the first element"; 
    } 
} 

<select id="numbers" onchange="ChangeText();">...</select> 

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