почему изменение свойства DOM в анонимной функции не работает?

#javascript

#javascript

Вопрос:

 <html>
    <head>
        <title>test</title>
        <script type="text/javascript">
            function start(){
                document.getElementById("first_div").onclick = function(){
                    document.getElementById("another_div").style.color = "red";                 
                };
            }
        </script>   
    </head>
    <body onload="start()">
        <div id="first_div">first</div>
        <div id="anoter_div">second</div>
    </body>
</html>
  

когда я нажимаю на first_div, произошла ошибка:

 TypeError: Result of expression 'document.getElementById("another_div")' [null] is not an object.
  

Есть идеи, почему это не работает?

Спасибо.

Ответ №1:

Вы допустили опечатку. Изменить:

 document.getElementById("another_div")
                             ^
  

Для:

 document.getElementById("anoter_div")
  

Или вы могли бы изменить имя вашего div , что, вероятно, лучше:

 <div id="anoter_div">second</div>

<div id="another_div">second</div>
             ^
  

Метод document.getElementById(..) не может найти элемент и возвращает null, что объясняет ошибку, которую вы получаете.