Невозможно прочитать свойство 'style' of null

Здесь есть много других вопросов об этой же же ошибке, однако я не нашел решения ни в одном из них.Невозможно прочитать свойство 'style' of null

Вот HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>ChatRoom</title> 
    <link rel="stylesheet" href="css/style.css"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> 
    <script src="js/main.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <div id="logo"> 
      <a href="./"> 
       <h1>ChatRoom</h1> 
       <h3>Basic Chatroom<h3> 
      </a> 
     </div> 
     <div id="joinForm"> 
      <div class="tHeader"> 
       <h2>Join A ChatRoom</h2> 
      </div> 
      <div class="formArea"> 
       <form action="joinRoom.php" method="GET"> 
        <h3>Name Of Room:</h3> 
        <input type="text" name="roomName" class="jmInput" placeholder="Name Of Room"> 
        <h3 class="margin-top">Password:</h3> 
        <input type="text" name="roomName" class="jmInput" placeholder="Password"> 
        <input type="submit" name="roomName" class="jmInput" value="Join ChatRoom"> 
       </form> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Вот JS:

window.onload = fadeIn(); 

function fadeIn() { 
var el = document.getElementById('joinForm'); 
el.style.opacity = 0; 

(function fade() { 
    var val = parseFloat(el.style.opacity); 
    if(!((val += .1) > 1)) { 
     el.style.opacity = val; 
     requestAnimationFrame(fade); 
    } 
})(); 
}

Видимо как-то document.getElementById ('joinForm') равна нулю. Я действительно не знаю, как я должен это исправить.

Любая помощь будет оценена по весу. Заранее спасибо:)

источник

2015-09-10 Skosh

window.onload = fadeIn();называетfadeIn и присваивает возвращаемое значение window.onload, точно так, как x = foo()вызововfoo и присваивает возвращаемое значение x. Поэтому ваш fadeIn не ждет события load. Итак, предположительно элемент, который вы ищете с getElementById, пока не существует, и поэтому getElementById возвращает null.

Удалите () присвоить ссылку на функцию:

window.onload = fadeIn;

Side Примечание: load событие происходит очень в конце процесса загрузки страницы, ожидая всех изображений и других внешних ресурсов для загрузки , Обычно вы просто хотите поместить свой тег script в самую нижнюю часть страницы, непосредственно перед закрывающим тегом </body>, и немедленно запустите свою функцию. — будет иметь доступ ко всем элементам, потому что они определены над ним. Но если у вас есть причина ждать load, просто удалите ().

источник

2015-09-10 14:09:00

Невозможно прочитать свойство 'style' of null

ответ

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