Почему первый вариант работает а второй нет?

Вариант 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
<script src="main.js" /></script>
</head>
<body>
<div id="message"></div>

<script>document.getElementById('message').innerHTML = one;</script>


</body>
</html>

Вариант 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
<script src="main.js" /></script>
</head>
<body>
<div id="message"></div>

</body>
</html>




main.js

var one = 'Hello';

document.getElementById('message').innerHTML = one;

javascript

5 ответов

Я думаю, что не сработало когда сверху из-за того, что в момент срабатывания скрипта javascript, div еще не существовал. В jquery есть $( document ).ready() для того, чтобы код срабатывал только когда все html загрузятся. Обычно все js внизу должны быть.

В одной папке

спасибо так у меня тоже сработал.
а почему не работает когда подключаю javascript в хедере?

Где находится файл с index.html и где находится файл main.js? В одной папке или разных?

Js в конце файла подключается после message, попробовал сделать пример, запустил у себя - работает, попробуй так:

index.html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>First Javascript</title>
</head>
<body>
    
    <div id="message"></div>

    <!-- Подключаем внешний файл Javascript -->
    <script src="myjavascript.js"></script>

</body>
</html>

myjavascript.js

var one = 'Hello';
document.getElementById('message').innerHTML = one;

Оба файла должны лежать в одной папке.